javascript - 如何使用 wrapInner() 将特定内容包装在 ah html 标签内？

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 只包含一个空格字符，该空格字符应位于这两个单词之间。