Question

我正在尝试从列表中获取内容（但不包括缠绕在其上的LI标记）并将其复制到其他位置。

我在这里有这个小提琴：http://jsfiddle.net/csaltyj/u5tFb/

我简直无法弄清楚这一点。我如何才能正常工作？

HTML：

<div id="container">
</div>

<ul>
   <li><p>Text 1</p><em>Text 2</em></li>
   <li>Gonna copy me too?</li>
   <li><h3>We're gonna be in DIVs!</h3></li>
</ul>

<button id="copy">Copy</button>
<button id="clear">Clear DIV</button>

CSS：

#container {
    background: #eee;
}

#container .special {
    border: 1px solid red;
}

li {
    list-style-type: disc;
    margin: 1em;
}

jQuery的：

$('#copy').click(function() {
    $('li').each(function(i) {
        $(this).clone().contents().wrap('<div class="special" />').appendTo('#container');
    });
});

jQuery的：

Answer 1

我相信你的问题是你假设wrap返回包装器。这是一个完全合理的假设，但它是不正确的;它返回原始元素，而不是包装器。因此，当你追加它们时，就好像你没有将它们放在一个包装器中，因为元素被移出它并且包装器被扔掉了。

我怀疑这更像是你在寻找的东西：

$('#copy').click(function() {
    $('li').each(function(i) {
        $("<div class='special'>")
            .append($(this).clone().contents())
            .appendTo('#container');
    });
});

Updated fiddle

虽然使用$(this).contents().clone()而不是$(this).clone().contents()因为不使用克隆包装li而略微更有效率，但只使用克隆的内容：

$('#copy').click(function() {
    $('li').each(function(i) {
        $("<div class='special'>")
            .append($(this).contents().clone())
            .appendTo('#container');
    });
});

Updated fiddle

无论哪种方式，那些将这两个元素放在第一个li的一个包装div中，我怀疑这是你想要的。或者，如果你真的想要分别包装每个li 中的每个部分，那么在进行最后的追加之前，只需向上移动到父元素（但是这会分裂出来 每个 li中的每个元素都放入其自己的div中，我认为这不是你想要的那样：

$('#copy').click(function() {
    $('li').each(function(i) {
        $(this)
            .clone()
            .contents()
            .wrap('<div class="special" />')
            .parent()  // <=== The new bit
            .appendTo('#container');
    });
});

Updated fiddle

从LI标签获取内容并将其复制到别处的最佳方法是什么？

1 个答案: