¿Cómo encontrar el índice absoluto () 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+" )")
});

¡Esto está funcionando! (http://jsfiddle.net/3c5tz/)

Pero ... cuando hago/inserto más etiquetas HTML como esta ...

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

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

¿Algunas ideas?

Answer 1

Por favor consulte el documentación de index(). En su ejemplo, JQuery no puede saber realmente qué tipo de índice está buscando, en relación con qué?

Una forma de hacer esto es proporcionar el selector para .index():

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

demo jsfiddle

Otra forma (en este caso quizás más efectiva) es ejecutar index() en toda la colección, y pase el elemento como parámetro:

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

demo jsfiddle

Answer 2

El índice se pasa al .each() Método que no tiene que reinventar la rueda:

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

Violín actualizado.

Answer 3

Tienes elementos anidados accidentalmente dentro del otro.

Cambia esto:

<h2><h2>

a esto:

<h2></h2>

Entonces funciona bien. Manifestación: http://jsfiddle.net/guffa/3c5tz/14/

Answer 4

usar .index('.findthis') para restringir el recuento solo dentro de la lista de .findthis elementos.

demo en http://jsfiddle.net/3c5tz/5/

También se corrigió el faltante </h2> insecto

Answer 5

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

Prueba esto ...