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

Question

在下面的代码中，当用户单击“click me”div 时，一个新的列表项被“克隆”，并且它按照我期望的方式工作。

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

<小时/>

但是，在下面的代码版本中，我修改了代码以不具有后代选择器。在此版本中，当您单击“click me”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>这只是你的情况之一。这就是后代选择器的用途 - 获取特定元素，而不是全部。

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

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

<小时/>

虽然只是$('li')选择<li>s来自整个 DOM(初始 + 新附加)。数量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>