如何在 jQuery UI 手风琴中找到包含特定元素的手风琴选项卡的索引？答案

【问题标题】：How do you find the index of an accordion tab containing a specific element within a jQuery UI Accordion?如何在 jQuery UI 手风琴中找到包含特定元素的手风琴选项卡的索引？
【发布时间】：2016-11-10 02:31:21
【问题描述】：

我有一个链接/日期的手风琴（档案）。当用户单击一个时，我试图让手风琴展开到当前选定的链接。为此，我在手风琴中搜索与当前 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>

Javascript

// 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); 强制手风琴操作，但我想知道如何找到找到的链接的索引。考虑到手风琴中的索引是基于标题标签而不是手风琴中的实际索引。

IE：

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

会在两个 <h4> 标记上折叠，第二个的索引是 3 而不是 1，就像你需要这个 .accordion() 函数一样。

【问题讨论】：

标签： javascript jquery jquery-ui accordion

【解决方案1】：

您可以使用index 函数来获取当前元素在父级中的索引/位置（您也可以根据标记名使用它）

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

查看示例：
http://jsfiddle.net/tg4hc9zr/

【讨论】：

【解决方案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]);            
        }    
    });

【讨论】：