javascript-如何使用wrapInner()将某些内容包装在html标签中？

我有这样的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()或其他类似方法)？

解决方法:

考虑一下：

$( '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都恰好包含一个空格字符,该空格字符应位于这两个单词之间.