first - parent jquery ejemplos

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

Question

Tengo una etiqueta A que activa la animación de su tatarabuelo. 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 el primero podría ser, ya que es el más explícito, pero por razones de mantenimiento (el anidamiento puede cambiar) prefiero el segundo. Todos parecen funcionar sin problemas en la práctica.

Answer 1

Aquí hay un análisis:

• parent() camina solo un nivel hacia arriba en el árbol DOM.
• parents(".foo") acerca a la raíz y selecciona solo aquellos elementos que coinciden con el selector dado .foo .
• parents(".foo") acerca a la raíz pero se detiene una vez que un elemento coincide con el selector .foo .

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

• Es mejor que encadenar parent , porque si su documento cambia porque eliminó o agregó una jerarquía, no necesita cambiar el código jQuery.
• Es mejor que los parents(".foo") , ya que se detiene tan pronto como se ha encontrado una coincidencia.

Answer 2

Creo que vi una presentación de John Resig que decía que close () está más optimizado, y tiene sentido. Closest () es una adición más reciente a jQuery y viene a resolver exactamente esta cadena padre (). 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 buscas el partido más cercano.

Answer 3

El más cercano bien solo es útil si está subiendo o al mismo nivel en el elemento ''hecho clic''.

Si, por ejemplo, tienes que seguir un escenario:

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

Luego closest(''#otherone'') no encontrará el campo de texto oculto en $(''.other-option'').click() closest(''#otherone'') $(''.other-option'').click() La mejor solución está en este escenario usar $(this).parentsUntil(''.radio-other'').find(''#otherone'')

Mirando mi respuesta hice una jsperf aquí que refleja el escenario anterior con diferentes soluciones. Simplemente use lo que sea más útil para su escenario html. el resultado es que parent().parent() es el método más rápido, sin embargo, esta no siempre es una buena opción si su html es más flexible en uso. Agregue un padre div y el parent().parent() rompe.

Answer 4

Es muy bueno que hayas hecho 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 la selección de rendimiento, la más legible (segundo y tercer aspecto bien).

Answer 5

No puedo comentar sobre la velocidad realística, sin embargo, la primera lo relaciona con una jerarquía de elementos específica, de la cual me gustaría alejarme.

Personalmente, trato de usar selectores de clase de todos modos. Me doy cuenta de que a menudo no hay otra manera, pero si puedo tener en cuenta un selector de ID, entonces sé que es probable que el rendimiento mejore de todos modos.

Answer 6

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

Answer 7

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