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

Question

In the below code when the user clicks the "click me" div a new list item is "cloned" and it works the way I would expect.

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

---

However, in the version of the code below I modified the code to not have a descendant selector. In this version when you click the "click me" div the number of elements is compounded on each click which tells me a closure is happening, but what I don't understand is why this doesn't happen when adding a descendant selector. Any clarification is appreciated. Thank you

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') selects descendant <li>s of just the .template <div> which is just one in your case. This is what Descendant selector is used for - To get specific elements, instead of all.

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

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

---

While just $('li') selects <li>s from the whole DOM (initial + newly appended). The number of li elements resulting from $('li') will increase with the append .

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

---

HTML at 2nd click, you can see there are two <li> at this point of time. So $('li') appends two elements and so on.

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

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

Answer 2

Why this doesn't work?

Lets take it here:

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

<ul>
</ul>

---

As you can see in your markup there is one li in the markup but that is not a valid way to put any list item outside of ul/ol . Only ul/ol s can have the list items.

This is just a simple info but in your code the issue seems to be here:

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

This line:

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

returns you a collection of list items available in the page. So if you have one list item at first click then it returned only one li then append gets executed. so there is now two li s, now if you click then you would see two li s are getting appended.

Solution:

so the simplest solution is to use :first :

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

now this line:

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

always returns you the first element found in the structure.