使用 JQuery clone() 并选择后代元素时此闭包如何工作

Question

在下面的代码中，当用户单击 "click me" div 时，一个新的列表项是 "cloned"，它的工作方式符合我的预期。

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);
});

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

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') 选择 .template <div> 的后代 <li>s，这只是您的情况之一。这就是 后代选择器 的用途 - 获取特定元素，而不是所有元素。

$(".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();

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

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

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

现在这一行：

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

总是returns你是结构中找到的第一个元素。

How does this closure work when using JQuery clone() and selecting descendant element