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

Question

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

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

但是，在下面的代码版本中，我将代码修改为没有后代选择器。在此版本中，当您单击“单击我” 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);
});

score 1 · Accepted Answer

$('.template li')<li>s选择只是.template <div>在你的情况下是一个的后代。这就是Descendant 选择器的用途 - 获取特定元素，而不是全部。

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

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

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

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

第 2 次单击时的 HTML，您可以看到此时有两个<li>。所以$('li')附加两个元素等等。

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

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

score 0 · Accepted Answer

为什么这不起作用？

让我们在这里：

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

<ul>
</ul>

正如您在标记中看到的那样，标记中有一个li，但这不是将任何列表项放在ul/ol. 只有ul/ols 可以有列表项。

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

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

这一行：

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

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

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

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

现在这一行：

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

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

2 回答 2