2011-09-07 10 views
5

Estoy tratando de saber qué tan "lejos" se encuentra un elemento cliqueado en el DOM con respecto a cierto otro elemento.cuenta el número de elementos entre el elemento "this" y "that"

<li>item1</li> 
<li>item2</li> 
<li class="active">item3</li> 
<li>item4</li> 
<li>item5</li> 
<li>item6</li> 
<li>item7</li> 

Así que cuando un usuario hace clic en un elemento que debe devolver la distancia al elemento activo: Así item1: return -2, item4: return 1, item6: return 3, y así sucesivamente.

+0

http://stackoverflow.com/questions/13875 60/find-number-of-nodes-between-two-elements-with-jquery –

+0

@Marcus - no es lo mismo. –

+0

Aparte de eso ^, siempre puede obtener una lista de los elementos y luego simplemente recorrerla, incrementando un contador para cada elemento y luego simplemente se rompe cada vez que toca el elemento que necesita. –

Respuesta

6

Creo que podría hacer que el método index() ...

Algo como esto:

var value = $('li').index() - $('li.active').index(); 
+0

¡Simple y dulce! Pequeñas modificaciones para que funcione dentro de una función 'clic':' $ (this) .index() - $ (this) .siblings (". Active"). Index() ' – peirix

+1

@peirix Si el usuario hace clic en el activo LI, entonces '$ (this) .siblings (". Active "). Index()' devolverá '-1', por lo que el cálculo será incorrecto. En su caso particular, al hacer clic en el LI activo, se devolverá '3' (' 2 - (-1) = 3'), como si se hubiera hecho clic en el elemento6 ... –

+0

Ya hay un control sobre eso en un punto anterior del código , por lo que no ejecutará este código si se hace clic en 'active'. Pero gracias por señalarlo, es bueno saberlo (: – peirix

2

Aquí van:

$(ul).delegate('li', 'click', function() { 
    var idx1 = $(this).index(), 
     idx2 = $(this).siblings().andSelf().filter('.active').index(); 

    var distance = idx1 - idx2; 

    // do stuff with distance 
}); 

Demostración en directo:http://jsfiddle.net/aeEBP/

Cuestiones relacionadas