Mit jQuery Zusammenbruch dynamisch

Question

ist die html part.Products Liste in Pannel angezeigt:

{% for product in pro %} 
    <div class="container"> 
     <div class="row"> 
      <div class="col-sm-4"> 
       <div class="panel panel-primary"> 
        <div class="panel-heading"> 
         {{ product.item_name }}<br> 
         {{ product.item_price }} 
         <div>{{ product.item_time_end }}</div> 
        </div> 
        <div class="panel-body"> 
         <img src="{{ product.item_image.url }}" class="img-rounded" alt="Cinque Terre" width="304" height="236"> 
        </div> 
        <div class="panel-footer"> 
         <button type="button" class="btn btn-success" id="myBtn"> 
          SUBMIT 
          <div class="collapse"> 
          ... 
          </div> 
         </button> 

jQuery:

$(document).ready(function(){ 
    $("#myBtn").click(function(){ 
     $(".collapse").collapse('show'); 
    }); 
}); 

Die Sache der Vorlage wird während macht, alle Artikel Liste Zusammenbruch auf einmal pannels . Wie werden die einzelnen Elemente beim Klicken auf die jeweiligen Elemente minimiert? Die Sache ist, dass die Knopf-ID für die Schleife gleich ist.

Answer 1

Verwenden $(this).next() die nächsten Geschwister zu finden, die die .collapse ist:

$(".myBtn").click(function(){ 
    $(this).next().collapse('show'); // this will work only if .collapse is the next sibling 
}); 

Oder verwenden .siblings():

$(".myBtn").click(function(){ 
    $(this).siblings('.collapse').collapse('show'); // this will work only if .collapse is one of the siblings 
}); 

Oder nutzen .parent() eine Ebene zu gehen, und suchen Sie nach .collapse wenn es ist nicht das nächste Geschwister:

$(".myBtn").click(function(){ 
    $(this).parent().find('.collapse').collapse('show'); 
}); 

Zusätzlich beachten Sie, dass ich .myBtn verwenden, da #myBtn eindeutig sein sollte:

<button type="button" class="btn btn-success myBtn">