jQuery - 兄弟にデータを追加するボタンを押す

Question

リストにデータを追加するためのボタンがあります。私はそれが私がそれを行きたいdivをハードコードするときにそれが働くように管理しましたが、私は異なるdivを更新する複数のボタンがあります。私はDRYコードを使用したいので、各ボタンが兄弟を更新するようにしようとしています。あなたがクリックされた特定の.btnなります$(this)を参照することができますjQueryの関数内で

HTML

<div class="box"> 
    <a class="btn" href="#">Export</a> 
    <div class="title"> 
     EXPORT LOG 
    </div> 
    <div class="content"> 
     <ul class="box-list"> 
      <li>Text</li> 
      <li>Text</li> 
      <li>Text</li> 
      <li>Text</li> 
     </ul> 
    </div> 
</div> 

jQueryの（コメントアウトコードはすべてのdivだけでなく、兄弟を更新）

$(".btn").click(function() { 
    $('<li>added text</li><li>more added text</li>').prependTo().parent().find(".box-list"); 

    // $('<li>added text</li><li>more added text</li>').prependTo(".box-list") 
}); 

Answer 1

。

のような何か：

$(".btn").click(function() { 
    $(this).parent().find(".box-list").prepend('<li>added text</li><li>more added text</li>') 

Answer 2

は、あなたがこのような何かを探しています：私はdivタグにあなたのアンカータグ（だけでスタイリングを取り除くために）更新しました何 http://codepen.io/anon/pen/qqYmBj

といくつかの追加CSS。私はまたあなたのコードを読みやすくするためにそれを打ち明けました。

$(".btn").click(function() { 
    myBox = $ (this).parent().find('.box-list'); #Finds parent element of the btn and then finds the .box-list element from that parent element. 
    newEl = $ ("<li>Added text</li><li>More Added text</li>"); #New element(s) to add 
    newEl.appendTo(myBox);#Adds to the box 
}); 

Answer 3

また、HTMLに少しだけロジックを追加して、正しいリストに常にヒットするようにすることもできます。

$(".btn").click(function() { 
 
    var containerID = $(this).attr('rel'); 
 
    $('<li>added '+containerID+' text</li>').prependTo('#'+containerID+' .box-list'); 
 
//  $('<li>added text</li><li>more added text</li>').prependTo(".box-list"); 
 

 
    // $('<li>added text</li><li>more added text</li>').prependTo(".box-list") 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="box"> 
 
    <a class="btn" rel="export" href="#">Export</a> 
 
    <a class="btn" rel="import" href="#">Import</a> 
 
    <div class="content" id="export"> 
 
    <h2>Export log</h2> 
 
     <ul class="box-list"> 
 
      <li>Text</li> 
 
      <li>Text</li> 
 
      <li>Text</li> 
 
      <li>Text</li> 
 
     </ul> 
 
    </div> 
 
    <div class="content" id="import"> 
 
    <h2>Import log</h2> 
 
     <ul class="box-list"> 
 
      <li>Text</li> 
 
      <li>Text</li> 
 
      <li>Text</li> 
 
      <li>Text</li> 
 
     </ul> 
 
    </div> 
 
</div>