아코디언에서 버튼을 클릭 한 색인을 확인하는 방법

Question

멀티 파트 양식 (유효성 검사 및 양식 플러그인 포함)과 함께 jQuery Accordion UI를 사용하고 있습니다. 각 양식에는 일반 제출 버튼과 편집 버튼이 있습니다. 편집 버튼은 현재 열려있는 섹션이 완료된 경우 제출을 트리거하거나 아직 완료되지 않은 경우 활성 섹션을 닫습니다. 그러면 아코디언이 편집 버튼이 클릭 된 섹션으로 열립니다.

예를 들어, 사용자는 섹션 1을 채우고 계속됩니다. 섹션 2를 채우는 동안 사용자는 실수로 섹션 1의 편집 버튼을 클릭하는 것을 알게됩니다. 섹션 2는 닫히고 섹션 1은 편집을 위해 다시 열립니다. 어떤 인덱스에 섹션 2를 닫을 수있는 편집 단추가 포함되어 있는지 알고 싶습니다 (이 경우 첫 번째 섹션과 연결된 인덱스).

편집 버튼을 클릭 한 부분 (색인)을 확인하는 방법을 알 수 없습니다. submitHandler 내에서 다음 코드를 사용할 때 올바른 색인을 얻지 못합니다.

var acc = $("#accordion"), 
index = acc.accordion('option','active'), 
index_origin = $(".edit").index(this); 
alert(index_origin); 

의견이 있으십니까?

나는 서투른 코드에 대해 미리 사과드립니다.

업데이트 : 아래는 코멘트에서 요청한대로 아코디언의 첫 번째 섹션에있는 HTML입니다.

<h3 id="section1"><a href="#" class="">Applicant Information</a><button id="edit-applicant-button" class="edit" value="edit" name="edit">Edit Applicant information</button></h3> 
     <div id="applicant-information" class="step"> 
       <form id="applicant-form" class="registration-form" name="applicant-form" method="post" action=""> 
        <fieldset id="clientInfo">     
. . . 
         </div> 
         <div class="step-action"> 
          <p> 
           <span class="next-step"> 
            <button id="submit-first" class="submit" type="submit" value="next" name="next"><em>Next</em></button> 
           </span> 
          </p> 
         </div>< 
        </fieldset>   
       </form> 
     </div> 

Answer 1

이있는 h 태그를 찾을 수 있습니다. #accordion에 선택기를 추가

이

index_origin = $("#accordion .edit").index(this); 

필수 아니지만, 하나 또는 여러 아코디언을 할 수 있습니다 : 그래서 당신이 당신의 자바 스크립트를 HTML로 변경, 또는 변경해야 할 것입니다.

편집. 추가 정보를 제공하면 해결책은 다음과 같습니다.

$("#accordion .edit").click(function(){ 
    window.lastButtonClicked = this; //Store clicked button in a global var. 
}); 

... 
submitHandler: function(){ 
    var index_origin = $("#accordion .edit").index(window.lastButtonClicked); 
} 

Answer 2

선택한 섹션이 활성 클래스입니다. 당신은 오류가 버튼의 실제 클래스 "edit"하지 "editButton" 점이다 활성 클래스를

$('#acordion h').hasclass('active').index()