Que es más eficiente: .parent(). Parent(). Parent() ~ o ~ parents (". Foo") ~ o ~ más cercano (". Foo")

Question

Tengo una etiqueta A que activa la animación de es genial, tatara-tatara-abuelo. Todo lo siguiente funcionará, pero ¿cuál es más eficiente y por qué?

$(this).parent().parent().parent().parent().parent().animate(...); 

$(this).parents(".foo").animate(...); 

$(this).closest(".foo").animate(...); 

sospecho que la primera podría ser, ya que es la más explícita, pero por razones de mantenimiento (la anidación puede cambiar) Yo prefiero la segunda. Todos ellos aparecen para funcionar sin problemas en la práctica.

Answer 1

El más cercano al pozo solo es útil si sube o está al mismo nivel en el elemento "hecho clic".

Si por ejemplo, usted tiene que escenario folowing:

<div class="controls radio-other"> 
    <label class="radio"><input type="radio" name="item">Option one</label> 
    <label class="radio"><input type="radio" name="item">Option two</label> 
    <label class="radio"><input type="radio" name="item" class="other-option" data-othertarget="#otherone"> Other... </label> 
    <input type="text" placeholder="Alternative answer" id="otherone" class="hidden"> 
</div> 

Entonces closest('#otherone') no se encuentra el campo de texto oculto en $('.other-option').click() La mejor solución es en este escenario es utilizar $(this).parentsUntil('.radio-other').find('#otherone')

Mirando a mi respuesta Hice un jsperf aquí que refleja el escenario anterior con diferentes soluciones. Solo usa lo que es más útil para tu escenario html. el resultado es que parent().parent() es el método más rápido, sin embargo, esto no siempre es una buena opción si su html es más flexible en su uso. Agregue un padre div y los descansos parent().parent().

Answer 2

Es muy bueno que haya realizado mediciones de rendimiento. Eso es exactamente lo que se debería hacer en tales escenarios. Si todo parece funcionar sin problemas en la práctica y está satisfecho con el rendimiento, elija el más legible (segundo y tercero se ven bien).

Answer 3

Creo que vi una presentación de John Resig diciendo que lo más cercano() está más optimizado, y tiene más sentido. Closest() es una adición más reciente a jQuery y viene a resolver exactamente esta fea cadena parent(). Parent(). Por otro lado, los padres() devuelven una matriz de padres que coinciden con su clase foo y son más codiciosos en términos de búsqueda en comparación con los más cercanos() que encuentran el primer elemento y dejan de buscar.

Apuesto a que el más cercano() es el más eficiente si está buscando la pareja más cercana.

Answer 4

No puedo hacer ningún comentario sobre la velocidad real, sin embargo, el primero te vincula con una jerarquía específica de elementos, de lo cual me rehúso.

Personalmente, trato de usar selectores de clase con moderación de todos modos. Me doy cuenta de que a menudo no hay otra manera, pero si puedo factorizar un selector de ID, entonces sé que el rendimiento probablemente mejore de todos modos.

Answer 5

He aquí un analyzation:

• parent() paseos sólo un nivel en el árbol DOM.
• parents(".foo") camina hacia la raíz y selecciona solo aquellos elementos que coinciden con el selector dado .foo.
• closest(".foo") camina hasta la raíz pero se detiene cuando un elemento coincide con el selector .foo.

Así que elegiría la última, closest(".foo"). La razón:

• Es mejor que el encadenamiento parent, porque si sus cambios del documento, ya que quitar o añadir una jerarquía, no es necesario cambiar el código de jQuery.
• Es mejor que parents(".foo"), ya que se detiene tan pronto como se ha encontrado una coincidencia.

Answer 6

También puede usar parents('.foo:first'). Supongo que es más o menos lo mismo que closest().

Answer 7

Una prueba rápida en Firefox 3.6.3 revela que parents('.foo').eq(0) es realmente significativamente más rápido que closest('.foo'). Es discutible si es tan fácil de mantener, pero podría ser más eficiente en escenarios específicos.

Answer 8

Encontré este sitio web que explica la pregunta que desea.

Use jQuery's $.closest() vs $.parents()