jQuery encuentra frente a la selección contexto

Tener el siguiente código HTMLjQuery encuentra frente a la selección contexto

<div class="something"> 
    <p>Some text</p> 
</div> 
<div class="somethingElse"> 
    <p>some other text</p> 
</div>

Creo que los siguientes fragmentos de jQuery son idénticos (tendrá el mismo resultado):

$(".something").find("p").css("border", "1px solid red"); 

$("p", ".something").css("border", "1px solid red");

Mi pregunta es, si un fragmento es mejor que el otro y debe usarse

Fuente

2010-02-26 harpax

¿Por qué no usa $ (". Something> p")? Eso es puro CSS. –

@Xr: Sería más bien '$ (". Something p ")'. – Gumbo

$ (". Something p") es en realidad el método más lento disponible porque, aparentemente, jQuery buscará de derecha a izquierda, buscando primero todos los elementos p del documento y luego filtrándolos para el antecesor .something. $ (". something"). find ("p") es el más rápido, según mi respuesta a continuación. – BrianFinkel

Las llamadas no son idénticas.

Según Brandon Aaron, quien aparentemente trabajó en jQuery, y también de acuerdo con las pruebas en vivo here, el método de búsqueda es siempre más rápido. Vea los resultados en la captura de pantalla a continuación. Por favor coméntame si me falta algo.

Con una diferencia del 10% o más en la velocidad, dependiendo del navegador, definitivamente parece que vale la pena usar find.

Una explicación más detallada en el sitio de Brandon es here.

Results of performance comparison between jQuery context and jQuery find method

Fuente

2012-01-28 15:12:33 BrianFinkel

Agregué una prueba para usar el contexto de la "manera correcta" de acuerdo con el artículo mencionado anteriormente, suministrando un nodo DOM para el segundo argumento. Irónicamente, es incluso más lento: http://jsperf.com/jquery-find-vs-context-2/3 – Grinn

tu gráfico muestra lo contrario de lo que dijiste. la línea roja es el contexto y parece ser más rápido que la línea azul (el método find). ¿Me falta algo? –

lo siento, mi confusión ... a primera vista parece lo contrario, pero el eje x es: operaciones por segundo, por lo que después de entender que tiene sentido –

Ambas llamadas son idénticas. La última llamada se traduce a la anterior. Si quiere omitir el paso de traducción, use el anterior.

Fuente

2010-02-26 14:35:39 Gumbo

Sí, lo que dijo ... –

que fue rápido ... gracias – harpax

Puede ser obvio, pero no estoy seguro: ¿Es esto? lo mismo, cuando el selector externo ya es un objeto jQuery? ¿Como $ sth.find ('p') es ligeramente más rápido que $ ('p', $ sth.)? – SunnyRed

puedo pensar en un caso de uso donde el uso de la forma context podría ser preferible - en el caso en que el contexto está contenida en una variable que puede ser nulo.

Por ejemplo:

// Only affect matching items that are descendants of '#parent' 
do_something($('#parent')); 
// Affect all matching items 
do_something(); 

function do_something($parent_element){ 
    $('.child', $parent_element).each(function(){ }); 
}

La segunda vez do_something() se llama, si hubiéramos usado $parent_element.find() que habría fallado, mientras que en este ejemplo, si $parent_element no está definido o vaciar el contexto es nula, por lo tanto: la documento completo.

Es cierto que este es un caso extremo, pero simplemente surgió en algo en lo que estaba trabajando, así que pensé en ponerlo aquí para la posteridad.

Fuente

2013-11-28 21:54:23

Find es mejor, en un 40%:

http://jsperf.com/jquery-find-vs-context-2/13

nota la diferencia:

$myDiv = $("myDiv") 
myDiv = "#myDiv"

al pasar $myDiv, el elemento de jQuery, según el contexto, sus cerca de 10% más lento que $ .encontrar. al pasar en #myDiv, el selector jQuery como contexto, es un 40% más lento que $ .find.

$ .find> context.

Fuente

2013-12-12 00:31:22 dylanjha

jQuery encuentra frente a la selección contexto

Respuesta

Cuestiones relacionadas