1

我需要在与给定选择器匹配的其他元素中找到一个元素的索引。我不能简单地使用 .index() 没有参数我需要忽略几个“外来”元素。

$('body').delegate('.TabHeader', 'click', function() {

    var $this = $(this),
        // All tab headers.
        $headers = $this.parent().children('.TabHeader'),
        // All tab contents.
        $contents = $this.parent().siblings('.TabContent'),
        // New active tab position.
        // PROBLEM HERE, i would like to do that, but jQuery doesn't handle it:
        index = $this.index( $headers ),
        // New active tab header.
        $newActiveHeader = $headers.eq( index ),
        // New active tab content.
        $newActiveContent = $contents.eq( index );

    // Hidding all other tabs.
    $headers.not( $newActiveHeader ).removeClass('Active');
    $contents.not( $newActiveContent ).removeClass('Active').addClass('Hidden');

    // Showing new active tab.
    $newActiveHeader.addClass('Active');
    $newActiveContent.addClass('Active').removeClass('Hidden');

});

使用这种 HTML 代码：

<div>
    <ul>
        <li class="TabHeader Active">Tab 0</li>
        <li class="TabHeader">Tab 1</li>
        <li class="TabHeader">Tab 2</li>
        <!-- There can be foreign elements mixed with <li> elements -->
    </ul>
    <div class="TabContent Active">
        Content 0
    </div>
    <div class="TabContent Hidden">
        Content 1
    </div>
    <div class="TabContent Hidden">
        Content 2
    </div>
    <!-- There can be foreign elements mixed with <div> elements -->
</div>

（标签是动态生成的，所以我使用 .delegate() 如果重要的话）

有没有一种明确的方法可以在一组匹配的元素中获取元素的索引，而不仅仅是在 parent 的子元素中？

4

2 回答 2

2

jQuery index 方法将返回集合中传递的元素的索引：

// Assuming `this` refers to a `.TabHeader` element
var i = $('.TabHeader').index(this);
于 2013-08-14T10:37:50.527 回答
0 
$this.index(); // you don't have to refer to it's parent or siblings!

这会做。

例子

于 2013-08-14T10:53:44.867 回答