Bootstrap 4 如何获取引导手风琴的索引/id面板

Bootstrap 4 如何获取引导手风琴的索引/id面板,bootstrap-4,thymeleaf,accordion,Bootstrap 4,Thymeleaf,Accordion,我正在尝试获取手风琴活动面板的索引 我的例子: <div id="accordion"> <form id="creaAppunt" th:action="@{/provaCreaAppuntamento}" method="post" th:object="${appuntamento}"> <div c

我正在尝试获取手风琴活动面板的索引

我的例子:

<div id="accordion">
             <form id="creaAppunt" th:action="@{/provaCreaAppuntamento}" method="post" th:object="${appuntamento}">
                  <div class="card">
                    <div class="card-header" data-toggle="collapse" data-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne"  id="headingOne" index="1">
                          <h5 class="mb-0">
                            <div class="text-center">
                                Selezione Prestazione
                            </div>
                          </h5>
                    </div>
                
                    <div id="collapseOne" class="collapse show" aria-labelledby="headingOne" data-parent="#accordion">
                       
                          <div class="card-body">
                            <div class="form-row p-4">
                                <div class="form-group col-md-6">
                                    <label class="labelDoc">Seleziona Prestazione</label>
                                    <select id="prestazione" class="form-control" th:field="${appuntamento.idPrenotazione}">
                                        <option value="">---</option>
                                        <option th:each="prestazione: ${prestazioni}" 
                                            th:value="${prestazione.codice}" 
                                            th:utext="${prestazione.denominazione}"
                                        />
                                    </select>
                                </div>
                            </div>
                          </div>
                           <div data-toggle="collapse" data-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo" id="btnSalvaPrestazione">Avanti</div>
                        
                    </div>
                  </div>
                  <div class="card">
                    <div class="card-header collapsed " id="headingTwo" data-toggle="collapse" data-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo" index="2">
                      <h5 class="mb-0">
                        <div class="text-center">
                         Selezione Sede
                        </div>
                      </h5>
                    </div>
                    <div id="collapseTwo" class="collapse" aria-labelledby="headingTwo" data-parent="#accordion">
                        <div class="card-body">
                            <div class="form-row p-4">
                                <div class="form-group col-md-6">
                                    <label class="labelDoc">Sede Prenotazione</label>
                                    <select id="sede" class="form-control" th:field="*{sede}">
                                        <option value="">---</option>
                                    </select>
                                </div>
                            </div>
                        </div>
                    </div>
                  </div>
                  <div class="card">
                    <div class="card-header collapsed" id="headingThree" data-toggle="collapse" data-target="#collapseThree" aria-expanded="false" aria-controls="collapseThree" index="3">
                      <h5 class="mb-0">
                        <div class="text-center" >
                          Collapsible Group Item #3
                        </div>
                      </h5>
                    </div>
                    <div id="collapseThree" class="collapse" aria-labelledby="headingThree" data-parent="#accordion">
                      <div class="card-body">
                        Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
                      </div>
                    </div>
                  </div>
                  </form>
                </div>
$(document).ready(function() {
    
    $('#prestazione').selectize({
        valueField: 'codice',
        labelField: 'denominazione',
        searchField: 'denominazione',
        onChange: function () {

        }
    });
    
    $('#sede').selectize({
        valueField: 'codice',
        labelField: 'denominazione',
        searchField: 'denominazione'
    });
    
    var index = $('#accordion .in').parent().attr("id");

我想将数字2保存在变量“index”中,因为此时手风琴的第二个面板处于活动状态

accordion.html:

<div id="accordion">
             <form id="creaAppunt" th:action="@{/provaCreaAppuntamento}" method="post" th:object="${appuntamento}">
                  <div class="card">
                    <div class="card-header" data-toggle="collapse" data-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne"  id="headingOne" index="1">
                          <h5 class="mb-0">
                            <div class="text-center">
                                Selezione Prestazione
                            </div>
                          </h5>
                    </div>
                
                    <div id="collapseOne" class="collapse show" aria-labelledby="headingOne" data-parent="#accordion">
                       
                          <div class="card-body">
                            <div class="form-row p-4">
                                <div class="form-group col-md-6">
                                    <label class="labelDoc">Seleziona Prestazione</label>
                                    <select id="prestazione" class="form-control" th:field="${appuntamento.idPrenotazione}">
                                        <option value="">---</option>
                                        <option th:each="prestazione: ${prestazioni}" 
                                            th:value="${prestazione.codice}" 
                                            th:utext="${prestazione.denominazione}"
                                        />
                                    </select>
                                </div>
                            </div>
                          </div>
                           <div data-toggle="collapse" data-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo" id="btnSalvaPrestazione">Avanti</div>
                        
                    </div>
                  </div>
                  <div class="card">
                    <div class="card-header collapsed " id="headingTwo" data-toggle="collapse" data-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo" index="2">
                      <h5 class="mb-0">
                        <div class="text-center">
                         Selezione Sede
                        </div>
                      </h5>
                    </div>
                    <div id="collapseTwo" class="collapse" aria-labelledby="headingTwo" data-parent="#accordion">
                        <div class="card-body">
                            <div class="form-row p-4">
                                <div class="form-group col-md-6">
                                    <label class="labelDoc">Sede Prenotazione</label>
                                    <select id="sede" class="form-control" th:field="*{sede}">
                                        <option value="">---</option>
                                    </select>
                                </div>
                            </div>
                        </div>
                    </div>
                  </div>
                  <div class="card">
                    <div class="card-header collapsed" id="headingThree" data-toggle="collapse" data-target="#collapseThree" aria-expanded="false" aria-controls="collapseThree" index="3">
                      <h5 class="mb-0">
                        <div class="text-center" >
                          Collapsible Group Item #3
                        </div>
                      </h5>
                    </div>
                    <div id="collapseThree" class="collapse" aria-labelledby="headingThree" data-parent="#accordion">
                      <div class="card-body">
                        Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
                      </div>
                    </div>
                  </div>
                  </form>
                </div>
$(document).ready(function() {
    
    $('#prestazione').selectize({
        valueField: 'codice',
        labelField: 'denominazione',
        searchField: 'denominazione',
        onChange: function () {

        }
    });
    
    $('#sede').selectize({
        valueField: 'codice',
        labelField: 'denominazione',
        searchField: 'denominazione'
    });
    
    var index = $('#accordion .in').parent().attr("id");
你能帮我吗? 我需要获取索引,因为我需要一个函数,可以清除和禁用索引下的所有面板

谢谢大家!