Question

我有这样的HTML代码：

<ul class="table">
  <li>Height: 70cm</li>
  <li>Width: 100cm</li>
  <li>Depth: 400cm</li>
  <li>Color: yellow</li>
</ul>

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

<ul class="table">
  <li><span class="name">Height:</span> <span class="value">70cm</span></li>
  <li><span class="name">Width:</span> <span class="value">100cm</span></li>
  <li><span class="name">Depth:</span> <span class="value">400cm</span></li>
  <li><span class="name">Color:</span> <span class="value">yellow</span></li>
</ul>

我尝试过类似的事情：

$('ul.table li').html().replace('<li>', '<li><span class=name>');
$('ul.table li').html().replace(':', ':</span><span class=value>');
$('ul.table li').html().replace('</li>', ':</span></li>');

但它没有用。这可能与jQuery有关，例如使用wrapInner()或其他类似的方法吗？

Answer 1

考虑一下：

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

现场演示： http://jsfiddle.net/simevidas/gyqCh/

你必须确保每个LI只包含一个应该在这两个单词之间的空格字符。

Answer 2

尝试：

$('.table li').each(function(){
  var values = $(this).text().split(':');
  $(this).html('<span class="name">'+values[0]+':</span><span class="value">'+values[1]+'</span>');
});

Answer 3

调用$ .html（）只会返回内容，但您没有对内容的引用。

尝试

var myHtml = $('ul.table li').html();
myHmtl = myHmtl.replace('<li>', '<li><span class=name>');
myHmtl = myHmtl.replace(':', ':</span><span class=value>');
myHmtl = myHmtl.replace('</li>', ':</span></li>');

$('ul.table li').html(myHtml);

Answer 4

你可以这样做：

$('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 );        
});

现在之前没有用的一个原因是因为你在.html()内搜索li，但由于你的选择器包含了li，html()只能抓住其中的内容。

如何使用wrapInner（）来包装一些内容啊html标签？

4 个答案: