2012-04-04 23 views
5

Mam niektóre HTML tak:jest jquery .find zawsze przydatne?

<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(); 
+2

Nie są one równoważne. –

+0

http://api.jquery.com/jquery/#selector-context może pomóc w zrozumieniu – Greg

+0

ok, bardzo fajni faceci! – frenchie

Odpowiedz

2

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.

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

2

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.

3

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'); 
+0

Nie. Przeczytaj ponownie cytat: mówi, że byłoby to takie samo jak wykonanie '$ ('. SClass1', $ ('# MyDiv)). Show();' - mając selektor jako jeden ciąg jest inna rzecz (ale daje ten sam rezultat). – oezi

+0

Czy nie jest już tak, że pierwszy jest szybszy/bardziej zoptymalizowany? Jestem trochę niejasny, ale myślę, że napisanie twojego selektora o id najpierw, a następnie użycie find() albo pominie silnik selektora jQuery's Sizzle, albo sprawi, że będzie bardziej wydajny. Moja wiara jest oparta na filmie performance jQuery Paula Irisha: http://paulirish.com/2009/perf/ (slide 30) – Dominic

+0

@oezi - Równoważna w wykonaniu, ale nie zawsze w prędkości. Zobacz moją zaktualizowaną odpowiedź, gdzie dodałem link do jsPerf, który pokazuje właśnie to. –