当使用JQuery clone（）并选择后代元素时，此闭包如何工作

Question

在下面的代码中，当用户点击＆＃34;点击我＆＃34; div一个新的列表项是＆＃34;克隆＆＃34;它的工作方式和我期望的一样。

JSfiddle_1

HTML

  <div class="button">Click me</div>
        <div class="template">
            <li>oink</li>
        </div>

    <ul>
    </ul>

的JavaScript

$(".button").on("click",function(){

    var result = $('.template li').clone(); //______Descendant selector
    $("ul").append(result);
});

但是，在下面的代码版本中，我将代码修改为没有后代选择器。在此版本中，当您单击＆＃34;单击我＆＃34; div每次点击时元素的数量是复合的，这告诉我关闭正在发生，但我不明白为什么在添加后代选择器时不会发生这种情况。任何澄清表示赞赏。谢谢

JSfiddle_2

HTML

<div class="button">Click me</div>
    <div class="template">
        <li>oink</li>
    </div>

<ul>
</ul>

的JavaScript

$(".button").on("click",function(){

    var result = $('li').clone(); //______No descendant selector
    $("ul").append(result);
});

Answer 1

$('.template li')选择只有<li>s .template的后代<div>，这只是您的案例中的一个。这就是 Descendant selector 用于 - 获取特定元素而不是所有元素。

$(".button").on("click",function(){

    var result = $('.template li').clone(); //______Descendant selector
    $("ul").append(result);
});

虽然只有$('li')从整个DOM中选择<li>s（初始+新附加）。 li产生的$('li')元素数量会随append而增加。

$(".button").on("click",function(){
    var result = $('li:first').clone(); //______No descendant selector
    $("ul").append(result);
});

第二次点击HTML时，您可以看到此时有两个<li>。所以$('li')会附加两个元素，依此类推。

<div class="button">Click me</div>
<div class="template">
    <li>oink</li>
</div>

<ul>
    <li>oink</li>
</ul>

Answer 2

为什么这不起作用？

让我们把它带到这里：

<div class="button">Click me</div>
<div class="template">
    <li>oink</li>
</div>

<ul>
</ul>

正如您在标记中看到的那样，标记中只有一个li，但这不是将任何列表项置于ul/ol之外的有效方法。只有ul/ol才能拥有列表项。

这只是一个简单的信息，但在您的代码中，问题似乎就在这里：

$(".button").on("click",function(){
    var result = $('li').clone(); //______No descendant selector
    $("ul").append(result);
});

这一行：

var result = $('li').clone(); 

返回页面中可用的列表项集合。因此，如果您在第一次单击时有一个列表项，则它只返回一个li，然后执行追加。所以现在有两个li，现在如果你点击那么你会看到两个li被附加。

解决方案：

所以最简单的解决方案是使用:first：

$(".button").on("click",function(){
    var result = $('li:first').clone(); //______No descendant selector
    $("ul").append(result);
});

现在这一行：

$('li:first').clone();

总是返回结构中找到的第一个元素。