各divのdivを追加する方法

Question

「追加」をクリックすると各divを追加するリストがあります。 それは動作しますが、「追加」をクリックするたびにすべてのdivで機能します。私はクリックした各部門の新しいdivだけに出席したい。ここで が私のコードです：

$(".add").click(function() { 
 
    $(".content").append('<ul class="pricepart"><li><input type="text" /></li></ul>'); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="content"> 
 
    <ul class="pricepart"> 
 
    <li> 
 
     <input type="text" /> 
 
     <span class="add">ADD+</span> 
 
    </li> 
 
    </ul> 
 
</div> 
 
<div class="content"> 
 
    <ul class="pricepart"> 
 
    <li> 
 
     <input type="text"> 
 
     <span class="add">ADD+</span> 
 
    </li> 
 
    </ul> 
 
</div>

Answer 1

クラスにメソッドを適用しているだけで、クラスが見つかったところで関数が実行されるためです。

この関数をclick要素の親クラスで実行するように定義する必要があります。

あなたはいつか.parents()この

$(".add").click(function() { 
    $(this).closest(".content").append('<ul class="pricepart"><li><input type="text" /></li></ul>'); 
}); 

OR

$(".add").click(function() { 
    $(this).parents(".content").append('<ul class="pricepart"><li><input type="text" /></li></ul>'); 
}); 

のように同じのため.parents()または.closest()セレクタを使用することができますが、同じクラスとマルチレベルの継承がある場合は、問題を作成しますが、この中に場合でもそれは正常に動作します

Answer 2

あなたはthisを選択する必要があり、このように、ボタンの親をクリック：

$(".add").click(function() { 
    $(this).parents(".content").append('<ul class="pricepart"><li><input type="text" /></li></ul>'); 
}); 

の作業例：https://jsfiddle.net/k98tw1je/

また、あなたが使用することができますの代わりに

Answer 3

$(".content")ではなく、あなたがそのclosest()方法についてクリック.add要素に基づいて要素を取得する必要がありますクラスを持つすべての要素を選択します。

$(".add").click(function() { 
    // inside the handler `this` refers to the dom object of 
    // clicked element and closest can be used to find nearest 
    // ancestor element 
    $(this).closest(".content").append('<ul class="pricepart"><li><input type="text" /></li></ul>'); 
}); 

Answer 4

は `` $（ "コンテンツ"） `と` $（この）.closest（ 'コンテンツ'）を交換してくださいThis-

$(".add").click(function() { 
 
    $(this).parents().eq(2).append('<ul class="pricepart"><li><input type="text" /></li></ul>'); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> 
 
<div class="content"> 
 
    <ul class="pricepart"> 
 
    <li> 
 
     <input type="text" /> 
 
     <span class="add">ADD+</span> 
 
    </li> 
 
    </ul> 
 
</div> 
 
<div class="content"> 
 
    <ul class="pricepart"> 
 
    <li> 
 
     <input type="text" /> 
 
     <span class="add">ADD+ </span> 
 
    </li> 
 
    </ul> 
 
</div>

JSFiddle