如何在jQuery UI accordion中找到包含特定元素的accordion选项卡的索引?

How do you find the index of an accordion tab containing a specific element within a jQuery UI Accordion?

本文关键字：accordion 元素 选项 索引 包含特 jQuery UI      更新时间：2023-09-26

我有一个链接/日期的手风琴(存档)。当用户单击一个时，我试图将手风琴扩展到当前选择的链接。为此，我在手风琴中搜索与当前URL匹配的链接，然后将手风琴展开为该链接。

JSFiddle 

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

IE:

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

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

您可以使用index函数来获取父元素内部的当前元素的索引/位置(您也可以根据标记名使用它)

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

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

您可能正在寻找这个。只需将此函数添加到accordion函数调用中，它将为您提供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]);            
        }    
    });
相关文章：