0

以下のコードでは、ユーザーが "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);
});

ただし、以下のバージョンのコードでは、子孫セレクターを持たないようにコードを修正しました。このバージョンでは、「クリックしてください」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);
});
4

2 に答える 2

0

なぜこれが機能しないのですか？

ここでそれを見てみましょう：

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

<ul>
</ul>

マークアップでわかるように、マークアップには 1 つありますがli、リスト項目を の外に置く有効な方法ではありませんul/ol。ul/olリスト項目を持つことができるのはだけです。

これは単なる情報ですが、あなたのコードでは問題はここにあるようです:

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

この行：

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

ページで使用可能なリスト アイテムのコレクションを返します。したがって、最初のクリックでリスト項目が 1 つある場合は、1 つだけが返さliれ、追加が実行されます。これで 2 つliの s ができました。クリックすると、2 つliの s が追加されていることがわかります。

解決：

最も簡単な解決策は、次を使用すること:firstです。

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

今この行：

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

構造体で見つかった最初の要素を常に返します。

于 2015-04-30T06:34:57.113 に答える