jQuery UI Accordion에서 특정 요소가 포함 된 아코디언 탭의 인덱스를 어떻게 찾을 수 있습니까?

Question

링크/날짜의 아코디언 (보관 파일)이 있습니다. 사용자가 하나를 클릭하면 아코디언을 현재 선택된 링크로 확장하려고합니다. 이렇게하려면 현재 URL과 일치하는 링크에 대해 아코디언을 검색 한 다음 아코디언을 해당 링크로 확장하려고합니다.

JSFiddle

위의 예에서 HTML

<div class="desktop"> 
    <div id="blog-archive-accordion"> 
     <h3 id="archive" class="title">Archive</h3> 
     <div id="blog-archive-accordion-year">  
      <h4>2016</h4>  
      <ul> 
       <li class="month">November (0)</li> 
       <li class="month"><a class="" href="/website/archive?filter[year]=2016&amp;filter[month]=10">October</a> (5)</li> 
       <li class="month"><a class="" href="/website/archive?filter[year]=2016&amp;filter[month]=9">September</a> (11)</li> 
       <li class="month"><a class="" href="/website/archive?filter[year]=2016&amp;filter[month]=8">August</a> (8)</li> 
       .... 
      </ul> 
      <h4>2015</h4>  
      <ul> 
       <li class="month">November (0)</li> 
       <li class="month"><a class="" href="/website/archive?filter[year]=2016&amp;filter[month]=10">October</a> (5)</li> 
       <li class="month"><a class="" href="/website/archive?filter[year]=2016&amp;filter[month]=9">September</a> (11)</li> 
       <li class="month"><a class="current-archive-link" href="/website/archive?filter[year]=2016&amp;filter[month]=8">August</a> (8)</li> 
       <li class="month"><a class="" href="/website/archive?filter[year]=2016&amp;filter[month]=7">July</a> (9)</li> 
       .... 
      </ul> 
      <h4>2014</h4>  
      <ul> 
       <li class="month">November (0)</li> 
       <li class="month"><a class="" href="/website/archive?filter[year]=2016&amp;filter[month]=10">October</a> (5)</li> 
       <li class="month"><a class="" href="/website/archive?filter[year]=2016&amp;filter[month]=9">September</a> (11)</li> 
       ....    
      </ul> 
     </div> 
    </div> 
</div> 

자바 스크립트

// Accordionize the above structure. 
$(function() { 
    $("#blog-archive-accordion").accordion({ header: "h3" }); 
    $("#blog-archive-accordion-year").accordion({ header: "h4" }); 
}); 

// Find the current url in the accordion links (obv. doesn't work like this in JSFiddle) 
//var selectedArchiveLink = $('#blog-archive-accordion').find("a[href='" + location.pathname + location.search +"']").parent(); 
var selectedArchiveLink = $('#blog-archive-accordion').find(".current-archive-link").parent(); 
if(selectedArchiveLink.length > 0){ 
    selectedArchiveLink.addClass("current-archive-link"); // Style the current link 

    // How do I know where the found link was? 
    $('#blog-archive-accordion-year').accordion('option', 'active', 1); 
} 

나는 .accordion('option', 'active', 1);와 아코디언 OPE를 강요하고있어하지만 난 방법을 알고 싶습니다 발견 된 링크의 색인을 찾으십시오. 아코디언의 인덱스는 아코디언의 실제 인덱스가 아니라 표제 태그를 기반으로합니다.

IE :

<h4></h4> 
<ul></ul> 
<div></div> 
<h4></h4> 
<div></div> 

두 <h4> 태그에 아코디언 것이며,이 .accordion() 기능에 필요한 것처럼 두 번째의 인덱스는 3없는 일이다.

Answer 1

당신은 부모 내에서 현재 요소의 인덱스/장소를 얻기 위해 index 기능을 사용할 수 있습니다 (당신은 태그 이름에 따라도 사용할 수 있습니다)

selectedArchiveLink.parent().index('ul') 

는 예를 확인 :
를 http://jsfiddle.net/tg4hc9zr/

Answer 2

당신이 이것을 찾고있을 수도 있습니다. 아코디언 함수 호출에이 함수를 추가하기 만하면 h4 태그의 인덱스를 얻을 수 있습니다. 희망이 도움이됩니다.

는

activate: function(evt, widget) { 
     var index = $(this).find("h4").index(widget.newHeader[0]);    
    } 


$("#blog-archive-accordion-year").accordion({ 
     header: "h4", 
     activate: function(evt, widget) { 
      var index = $(this).find("h4").index(widget.newHeader[0]);    
     }  
    });