HTML с конструкцией id динамически

Question

У меня есть html-страница с div, которая имеет кнопку начальной загрузки, чтобы свернуть/развернуть таблицу. Я хочу нажать на него, чтобы переключить 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 

Ид-х accordion-{{ $dimensao->id }} и competencia-{{ $competencia->id }} генерируются с двумя foreach's.

Проблема в том, что код javascript получает только первые идентификаторы accordion-{{ $dimensao->id }} и competencia-{{ $competencia->id }}.

Я борюсь с этим в течение нескольких часов без успеха. Как я могу получить этот идентификатор правильно, когда я нажимаю кнопку?

Answer 1

Если я понять правильно, вы гораздо лучше не использовать id с на всех и просто полагаться на class эс. Используйте $(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');