Come trovare un indice assoluto () con jQuery?

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

Questo funziona! (http://jsfiddle.net/3c5tz/)

Ma ... quando faccio/inserisco più tag HTML come questo ...

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

fallisce! (http://jsfiddle.net/3c5tz/1/)

Qualche idea?

Answer 1

Si prega di consultare il documentazione di index(). Nel tuo esempio, JQuery non può davvero sapere che tipo di indice stai cercando, rispetto a cosa?

Un modo per farlo è fornire il selettore .index():

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

Demo JSFIDDLE

Un altro modo (in questo caso forse più efficace) è correre index() sull'intera collezione e passa l'elemento come parametro:

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

Demo JSFIDDLE

Answer 2

L'indice viene passato al file .each() Metodo non devi reinventare la ruota:

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

Violino aggiornato.

Answer 3

Hai nidificato accidentalmente elementi l'uno nell'altro.

Cambia questo:

<h2><h2>

a questo:

<h2></h2>

Quindi funziona bene. Demo: http://jsfiddle.net/guffa/3c5tz/14/

Answer 4

uso .index('.findthis') per limitare il conteggio solo all'interno dell'elenco di .findthis Oggetti.

Demo a http://jsfiddle.net/3c5tz/5/

Risolto anche la mancanza </h2> insetto

Answer 5

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

Prova questo ...