Question

<nav>
    <section>
        <aside>
    <div class="findthis">111111</div>
    <div class="findthis">222222</div>
    <div class="findthis">333333</div>  
    <div class="findthis">444444</div>
        </aside>
    </section>
</nav>


$('.findthis').each( function(){
      var index = $(this).index()+1;
      $(this).append(" ( this element = "+index+" )")
});

这是有效的！（http://jsfiddle.net/3c5TZ/）

但....当我这样做/插入更多这样的HTML标签时......

<nav>
    <section>
        <aside>
    <div class="findthis">111111</div>
            <h2><h2>
    <div class="findthis">222222</div>
            <span></span>
    <div class="findthis">333333</div>
            <b></b>                          
    <div class="findthis">444444</div>
        </aside>
    </section>
</nav>

失败了！（http://jsfiddle.net/3c5TZ/1/）

有什么想法吗？

Answer 1

索引将传递给您不必重新发明轮子的.each()方法：

$('.findthis').each( function(index){
    $(this).append(" ( this element = " + (index + 1) + " )")
});

Updated fiddle

Answer 2

请咨询documentation of index()。在你的例子中，jQuery无法真正知道你正在寻找什么样的索引，相对于什么？

这样做的一种方法是为.index()提供选择器：

$('.findthis').each( function(){
      var index = $(this).index('.findthis')+1;
      $(this).append(" ( this element = "+index+" )")
});

jsFiddle Demo

另一种（在这种情况下可能更有效）方法是在整个集合上运行index()，并将该元素作为参数传递：

var $collection = $('.findthis');
$collection.each( function(){
      var index = $collection.index(this)+1;
      $(this).append(" ( this element = "+index+" )")
});

jsFiddle Demo

Answer 3

您意外地将元素嵌套在彼此内。

改变这个：

<h2><h2>

到此：

<h2></h2>

然后它工作得很好。演示：http://jsfiddle.net/Guffa/3c5TZ/14/

Answer 4

使用.index('.findthis')仅限制.findthis项列表中的计数。

演示http://jsfiddle.net/3c5TZ/5/

还修复了丢失的</h2>错误

Answer 5

$('.findthis').each( function(i){
  $(this).append(" ( this element = "+i+" )")
});

试试这个......

如何用jQuery找到绝对索引（）？

5 个答案: