帶ID動態構造的HTML

Question

我有一個帶有引導按鈕的div的html頁面，用於摺疊/展開表格。我想點擊它來切換collpase/expand。

我從這個fiddle的啓發。

的JavaScript是

$('.meu-painel-colapsar').on('click', function() { 
     var id1 = $('.meu-painel-colapsar').attr('id'); 
     var id2 = $('.colapsar-competencias').attr('id'); 
     alert(id1); 
     $('#' + id2 + ' .colapsar-competencias').collapse('toggle'); 
    }); 

和HTML是

@foreach($dados as $dimensaoNome => $dimensao) 
     <div class="panel panel-{{ $cores[$dimensaoNome] }} meu-painel-colapsar" id="accordion-{{ $dimensao->id }}"> 

         <button type="button" class="btn btn-success btn-xs" 
           id="dimensao_{{ $dimensao->id }}" 
           data-toggle="collapse" data-target="#"> 
          <span class="glyphicon glyphicon-list-alt" aria-hidden="true"></span> veja os resultados 
         </button> 

      <div class="panel panel-default"> 
       @foreach($dimensao->competencias as $competenciaNome => $competencia) 

        <div class="panel-heading"> 
         <div class="row"> 
          <div class="col-md-6"><h4 class="competencia-head">{{ $competenciaNome }}</h4></div> 
          <div class="col-md-6" style="padding-top:8px;"> 
         </div> 
        </div> 
        <div class="collapse colapsar-competencias" id="competencia-{{ $competencia->id }}"> 
         <table class="table table-condensed"> 
          <thead> 
          <tr> 
           <th>Situação atual</th> 
           <th class="col-md-6">Oportunidades identificadas</th> 
          </tr> 
          </thead> 
          <tbody> 
          <tr> 
           <td> 
            <p>{{ $competencia->nivel->texto }}</p>           
           </td> 
           <td> 
            <div class="col-lg-12"> 
             {!! $competencia->recomendacao !!} 
            </div> 
           </td> 
          </tr> 
          </tbody> 
         </table> 
        </div> 
       @endforeach 
      </div> 
     </div> 
@endforeach 

ID用accordion-{{ $dimensao->id }}和competencia-{{ $competencia->id }}與兩個foreach's產生。

問題是javascript代碼只獲得accordion-{{ $dimensao->id }}和competencia-{{ $competencia->id }}的第一個id。

我正在爲此奮鬥幾個小時而沒有成功。點擊按鈕後，如何正確獲取此ID？

Answer 1

如果我理解正確的，你好得多，在所有不使用id S和僅僅依靠class ES。使用$(this).find(...)只能找到.colapsar-competencias元素裏面的點擊元素。

$('.meu-painel-colapsar').on('click', function() { 
    $(this).find('.colapsar-competencias').collapse('toggle'); 
}); 

Answer 2

http://jsfiddle.net/Vq6gt/120/

$('#accordion .panel-collapse',this).collapse('toggle');