CODEWITHSUNDEEP
jquerydom-traversal
l2aelba
l2aelba

Reputation: 22217

How to find absolute index() with jQuery?

<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+" )")
});

this is working! (http://jsfiddle.net/3c5TZ/)

but.... when i do/insert more HTML-tags like this...

<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>

it fails! (http://jsfiddle.net/3c5TZ/1/)

Any ideas?

Upvotes: 3

Views: 459

Answers (5)

Avi
Avi

Reputation: 251

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

Try this ...

Upvotes: -1

Shadow Wizzard
Shadow Wizzard

Reputation: 66398

The index is passed to the .each() method you don't have to reinvent the wheel:

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

Updated fiddle.

Upvotes: 5

Guffa
Guffa

Reputation: 700720

You have accidentally nested elements inside each other.

Change this:

<h2><h2>

to this:

<h2></h2>

Then it works just fine. Demo: http://jsfiddle.net/Guffa/3c5TZ/14/

Upvotes: 3

Gabriele Petrioli
Gabriele Petrioli

Reputation: 196236

use .index('.findthis') to constrain the counting only inside the list of .findthis items.

demo at http://jsfiddle.net/3c5TZ/5/

also fixed the missing </h2> bug

Upvotes: 1

kapa
kapa

Reputation: 78731

Please consult the documentation of index(). In your example, jQuery cannot really know what kind of index you are looking for, relative to what?

One way of doing this is providing the selector for .index():

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

jsFiddle Demo

Another (in this case maybe more effective) way is to run index() on the whole collection, and pass the element as a parameter:

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

jsFiddle Demo

Upvotes: 4

Related Questions