là jquery .find luôn hữu ích?

Question

Tôi có một số HTML như thế này:

<div id="MyDiv"> 

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

</div> 

Có sự khác biệt giữa

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

và

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

Answer 1

trong bạn trường hợp, sử dụng find() là khá vô nghĩa (trừ khả năng đọc - nhưng bất cứ ai cũng sẽ có ý kiến ​​khác về điều đó). tôi chỉ sử dụng find() trong trường hợp nó thực sự cần thiết, như:

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

nơi một cái gì đó phải được thực hiện với phụ huynh-yếu tố đầu tiên và cái gì khác với một hoặc nhiều con của nó.

Answer 2

Về cơ bản, không có sự khác biệt. Nhưng find() rất hữu ích nếu bạn sử dụng nó với các biến có phạm vi và this.

Ví dụ:

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

nào tập hợp tất cả p trong bất cứ điều gì trong đó có một lớp có tên action để "hello world".

Answer 3

Cả hai đều tương đương nhau. Người đầu tiên sẽ hơi chậm hơn, vì bạn đang thực hiện hai truy vấn. Sự khác biệt về tốc độ có lẽ không đáng chú ý.

Bạn có thể sử dụng find trong những trường hợp khi bạn đang tạo một plugin/thành phần mà được nó chứa trong các nhà xây dựng và hơn bạn sử dụng nó như thư mục gốc của tìm kiếm của bạn với find để đảm bảo rằng bạn không nhận được bất kỳ yếu tố bên ngoài vùng chứa của bạn.

Answer 4

http://api.jquery.com/jquery/#selector-context khẳng định rằng:

Bên trong, bối cảnh selector được thực hiện với phương pháp .find(), nên $ ('tuổi', điều này) là tương đương với $ (this) .find ('tuổi ').

Có nghĩa

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

là chỉ có một bước xa jQuery trong nội bộ làm cho nó

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

View this jsPerf test case to see the differences in speed

---

Như @Dominic đề cập trong các ý kiến, trong anh.210, Paul Irish khẳng định:

Selector Tối ưu hóa

Tất nhiên, giảm dần từ một #ID là tốt nhất

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

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