jQuery - drücken Sie die Taste, um Daten zu Geschwister hinzuzufügen

Question

Ich habe eine Schaltfläche, die ich verwenden möchte, um Daten zu einer Liste hinzuzufügen. Ich habe es geschafft, es zu arbeiten, wenn ich das div festschreibe, das ich zu ihm gehen möchte, aber ich habe mehrere Knöpfe, um verschiedene divs zu aktualisieren. Ich möchte DRY-Code verwenden, also versuche ich, dass jede Schaltfläche nur ihre Geschwister aktualisiert.

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 (der Kommentar gesetzt Code aktualisiert alle divs, nicht nur Geschwister)

$(".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

Innerhalb der jQuery-Funktion können Sie $(this) Referenz, die wird die besondere .btn sein, auf den geklickt wurde .

Etwas wie:

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

Answer 2

Suchen Sie etwas wie folgt aus: http://codepen.io/anon/pen/qqYmBj

Was ich tat, war Update Ihr Anker-Tag zu einem div-Tag (nur das Styling zu entfernen) und das Hinzufügen von ein paar CSS. Ich habe auch deinen Code ausgebrochen, um ihn lesbarer zu machen.

$(".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

Oder Sie ein bisschen mehr Logik in die HTML hinzufügen können, und dass, um sicherzustellen, verwenden Sie immer die richtige Liste getroffen.

$(".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>