如何克隆查询列表的内部html并包装它

Question

这是CMS生成的内容

<ul>
    <li>something 1<span>subline</span></li>
    <li>something 2<span>subline</span></li>
    <li>something 3<span>subline</span></li>
</ul>

这就是我以后想要的，我想克隆每个<li>的内容，然后把它包裹在一个<span>里，放在它的前面。

<ul>
    <li><span class="slidein">something 1<span>subline</span></span>something <span>subline</span></li>
    <li><span class="slidein">something 2<span>subline</span></span>something <span>subline</span></li>
    <li><span class="slidein">something 3<span>subline</span></span>something <span>subline</span></li>
</ul>

我的问题是我对jQuery知之甚少，我知道像html(), appendTo(), clone()，…但是我试图把它们结合在一起使这个工作失败了。

我的一个问题是我不知道如何处理self在一次尝试中，我自己只是没有工作。我需要使用each()函数吗?我相信会有很多方法来做到这一点，但最容易理解的代码是什么?

我打算使用克隆的span，你猜对了，用另一种颜色样式滑动它。我想我必须克隆这个，CSS只会不起作用，如果我想在它之前移动完全相同的内容，对吧?

解决:

(function($) {
    $('ul > li').each(function(){
        var html = $(this).html();
        $(this).html('<span class="slideIn">' + html + '</span>' + html);
    });
})(jQuery);

Answer 1

$(function(){
    $('ul li').each(function(){
        var text = $(this).html();
        $(this).html('<span class="slidein">' + text + '</span>')
    });
});

Answer 2

使用。wrapinner()函数;)

$("ul > li").wrapInner("<span class='slidein' />")