如何在查询中克隆列表的内部 html 并将其包装答案

【问题标题】：How to clone the inner html of a list in query and wrap it如何在查询中克隆列表的内部 html 并将其包装
【发布时间】：2013-04-07 23:29:54
【问题描述】：

这是我的 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() 函数吗？我相信会有很多方法可以做到这一点，但最容易理解的代码是什么？

我打算使用克隆的跨度，你猜对了，在悬停时以另一种颜色样式将其滑入。我想我必须克隆它，只有当我想在它之前移动完全相同的内容时，CSS 才会起作用？

已解决：

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

【问题讨论】：

在我告诉他我的解决方案后，他修改了它。

标签： jquery html clone css-transitions

【解决方案1】：

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

【讨论】：

【解决方案2】：

使用.wrapInner() 函数;)

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

【讨论】：

这比我的回答要好。所以删除它。
@karthikr 实际上并不是因为你们俩都没有仔细阅读，我需要克隆内容，然后只包装克隆的部分而不是所有内容，而您的回答实际上帮助了我。我在 text() 中使用了 html() 并修改了函数，进一步查看我的答案。
@Wayne，请不要在你的问题中回答你的问题。
@LinusCaldwell 为什么不呢？没有任何代表，我无法在这里回答。它告诉我。所以这是唯一的方法。