Question

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

包装器#wrapper包含三个不同嵌套的figure标记。我希望index()相对于#wrapper。

有什么想法吗？

<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

试试这个：在包装器中找到所有figure标签并迭代它们。

$(function(){
    $('#wrapper').find('figure').each(function(index){
     alert(index);
    });
});

<强> Demo

Answer 2

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

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

您选择要查看的元素集合（.find('figure')），然后询问特定元素的索引（this引用单击的figure，此处）。< / p>

您还可以传入另一个jQuery选择器作为index-element：

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

Answer 3

您可以将.index()与参数一起使用。阅读here

$("figure").click(function(){
var figureElements=$("#wrapper").find("figure");
    alert(figureElements.index(this));
});

Demo

Jquery获取相同类型的索引

3 个答案: