Javascript 如何使用wrapInner（）将特定内容包装到html标记中？

我有如下HTML代码：

$('ul.table li').each(function(i, elem){
    var html = $(elem).html();
    var s =  html.split(":");
    var final = "<span class='name'>" + s[0] + "</span>:<span class='value'>" + s[1] + "</span>";
    $(this).html(final );        
});

身高：70厘米
宽度：100厘米
深度：400厘米
颜色：黄色

现在，我希望它看起来像这样（在里面插入那些span标记；注意，总是有一个字符串“：”）：

身高：70厘米
宽度：100厘米
深度：400厘米
颜色：黄色

我试过这样的方法：

$（'ul.table li'）.html（）。替换（“
”，“
”）；
$（'ul.table li'）.html（）.replace（'：'，'：'）；
$（'ul.table li'）.html（）。替换（“
”，“：”）；

但它不起作用。使用jQuery，例如使用

wrapInner（）

，或其他类似方法，是否可以做到这一点

$( 'li', '.table' ).html( function ( i, html ) {
    html = html.split( ' ' );
    return '<span class="name">' + html[0] + '</span> <span class="value">' + html[1] + '</span>';
});

$（'li'，'.table'）.html（函数（i，html）{
html=html.split（“”）；
返回'+html[0]+''+html[1]+''；
});

现场演示：

您必须确保每个LI只包含一个空格字符，应该位于这两个单词之间。

调用$.html（）只返回内容，而没有对内容的引用

试一试

var myHtml=$（'ul.table li'）.html（）；
myHmtl=myHmtl.replace（“
”，“
”）；
myHmtl=myHmtl.replace（“：”，“：”）；
myHmtl=myHmtl.replace（“
”，“：”）；
$（'ul.table li'）.html（myHtml）；

试试：

$（'.table li'）。每个（函数（）{
var values=$（this.text（）.split（'：'）；
$（this.html（''+values[0]+'：''+values[1]+''）；
});

您可以这样做：

$('ul.table li').each(function(i, elem){
    var html = $(elem).html();
    var s =  html.split(":");
    var final = "<span class='name'>" + s[0] + "</span>:<span class='value'>" + s[1] + "</span>";
    $(this).html(final );        
});

$（'ul.table li'）。每个（函数（i，元素）{
var html=$（elem.html（）；
var s=html.split（“：”）；
var final=“+s[0]+”：“+s[1]+”；
$（this.html）（最终版）；
});

---

现在，它以前不起作用的一个原因是，您在

.html（）

中搜索li，但由于选择器包含li，因此

html（）

只获取其内部的内容

就在我去解决这个问题的路上。我仍然很惊讶有多少jQuery方法接受函数作为操作DOM的参数。

$('ul.table li').each(function(i, elem){
    var html = $(elem).html();
    var s =  html.split(":");
    var final = "<span class='name'>" + s[0] + "</span>:<span class='value'>" + s[1] + "</span>";
    $(this).html(final );        
});