javascript - jquery获取同类型索引

Question

我想知道如何获取特定包装器内相对于该包装器的图形标签的索引。我在这里准备了一个例子:http://jsfiddle.net/vhyfwbjm/ (或见下文)

包装器#wrapper包含三个不同嵌套的figure标签。我想获取相对于 #wrapper 的 index()。

有什么想法吗？

<div id="wrapper">
    <p>
        <figure>
            <img src="#" />
        </figure>
        <div class="another-wrapper">
            <figure>
                <img src="#" />
            </figure>
            <div class="another-wrapper">
                <figure>
                    <img src="#" />
                </figure>
            </div>
        </div>    
    </p>
</div>

Answer 1

您可以简单地询问#wrapper内的索引:

$('figure').on('click', function() {
    console.log( $('#wrapper').find('figure').index( this ) );
});

您选择要查看的元素集合 (.find('figure'))，然后询问特定元素的索引(this 指的是单击的图形，此处)。

您还可以传入另一个 jQuery 选择器作为索引元素:

<figure id="myFigure"></figure>
...
console.log( $('#wrapper').find('figure').index( $('#myFigure') ) );