jest jquery .find zawsze przydatne?

Question

Mam niektóre HTML tak:

<div id="MyDiv"> 

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

</div> 

Czy jest jakaś różnica między

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

i

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

Answer 1

w tobie przypadku korzystania find() jest dość bezsensowne (z wyjątkiem dla czytelności - ale każdy będzie miał inną opinię na ten temat). Używam tylko find() w przypadkach, gdy jest to naprawdę konieczne, jak:

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

gdzie coś musi być zrobione z pierwszego elementu nadrzędnego-i coś jeszcze z jednego lub więcej swoich dzieci.

Answer 2

Zasadniczo nie ma różnicy. Ale find() jest przydatny, jeśli używasz go ze zmiennymi o ustalonym zakresie i this.

Na przykład:

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

która zawiera wszystkie p wewnątrz wszystkiego, co ma klasę o nazwie action do "Hello World".

Answer 3

Obie są równoważne. Pierwszy będzie nieco wolniejszy, ponieważ robisz dwa zapytania. Różnica w prędkości prawdopodobnie nie jest zauważalna.

Można użyć find w przypadkach, gdy podczas tworzenia wtyczek/komponent, który dostaje to pojemnik w konstruktorze i nie używać go jako korzeń wyszukiwań z find, aby upewnić się, że nie dostaniesz żadnych elementów poza swoim kontenerem.

Answer 4

http://api.jquery.com/jquery/#selector-context stwierdza:

Wewnętrznie kontekst selektor jest realizowany przy .find() metoda, tak $ ('przęsła', this) jest równoważne $ (this) .find ("rozpiętości ").

oznacza Które

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

jest tylko jeden krok od jQuery wewnętrznie co

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

View this jsPerf test case to see the differences in speed

---

Jak @Dominic wspomniano w komentarzach, w jego jQuery Anti-Patterns for Performance & Compression presentation Paweł irlandzki stwierdza:

Optymalizacja Selector

Oczywiście, malejąco z ID najlepiej

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

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