我有这样的 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 只包含一个空格字符,该空格字符应位于这两个单词之间。
关于javascript - 如何使用 wrapInner() 将特定内容包装在 ah html 标签内?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/7852343/