对象集合之间的jQuery.index

我需要在与给定选择器匹配的其他元素中找到元素的索引。我不能简单地使用没有参数的.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>

（选项卡是动态生成的，所以如果重要的话，我使用.delete（））

是否有一种明确的方法可以在匹配的元素集合中而不仅仅在父元素的子元素中获取元素的索引？