es jquery. ¿Es útil siempre?

Question

que tienen algo de HTML así:

<div id="MyDiv"> 

    <div class="Class1"> 
    <div class="SClass1"></div> 
    </div> 
    <div class="Class2"></div> 

</div> 

¿Hay alguna diferencia entre

$('#MyDiv').find('.SClass1').show(); 

y

$('#MyDiv .SClass1').show(); 

Answer 1

en ti caso, utilizando find() es bastante sin sentido (a excepción de la legibilidad - pero cualquiera tendrá otra opinión sobre eso). Yo sólo uso find() en los casos en que es realmente necesario, como:

$('#MyDiv').show().find('.SClass1').css(...); 

donde algo se tiene que hacer con el padre de elementos primero y algo más con uno o más de sus hijos.

Answer 2

Esencialmente no hay diferencia. Pero find() es útil si lo usa con variables de ámbito y this.

Por ejemplo:

$(document).ready(function() { 
    $('.action').click(function() { 
     $(this).find('p').text("hello world"); 
    }); 
}); 

que establece todos p dentro de todo lo que tiene una clase denominada action a "hola mundo".

Answer 3

Ambos son equivalentes. El primero será un poco más lento, ya que estás haciendo dos consultas. La diferencia de velocidad probablemente no sea notoria.

Puede usar find en casos cuando está creando un complemento/componente que obtiene su contenedor en el constructor y que lo usa como la raíz de sus búsquedas con find para asegurarse de que no obtiene ningún elemento fuera de tu contenedor.

Answer 4

http://api.jquery.com/jquery/#selector-context establece que:

Internamente, el contexto de selección se lleva a cabo con el método .find(), por lo que $ ('período', esto) es equivalente a $ (this) .find ('lapso ').

Lo que significa

$('#MyDiv .SClass1').show(); 

es sólo un paso de distancia de jQuery internamente por lo que es

$('#MyDiv').find('.SClass1').show(); 

View this jsPerf test case to see the differences in speed

---

Como @Dominic menciona en los comentarios, en su jQuery Anti-Patterns for Performance & Compression presentation, Paul irlandesa afirma:

Selector de optimización

Por supuesto, descendiendo de un #id es mejor

// #id-based selector 
var arms = $('#container div.robotarm'); 

// hyper-optimized #id case first, then find: 
var arms = $('#container').find('div.robotarm');