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() を使用しています)

親の子の間だけでなく、一致した要素のセットの中から要素のインデックスを取得する明確な方法はありますか?

4

2 に答える 2

0 
$this.index(); // you don't have to refer to it's parent or siblings!

これで十分です。

例

于 2013-08-14T10:53:44.867 に答える