Thêm một số thuộc tính vào tất cả các mục đã chọn, mục nào là đúng và tại sao?

Question

Tôi đang cố gắng hiểu cách viết mã đúng.

HTML My

<div id="foo"> 
    <div></div> 
    <div></div> 
    <div></div> 
    <div></div> 
    <div></div> 
    <div></div> 
    <div></div> 
    <div></div> 
</div> 

Nếu tôi muốn thêm lớp bar cho tất cả các trẻ em divs của div foo, cách mà tôi nên sử dụng?

Lựa chọn 1 (hóa ra 3)

jQuery('#foo > div').addClass('bar'); 

Lựa chọn 2 (hóa ra 4 nhanh nhất)

jQuery('#foo').children('div').addClass('bar'); 

Lựa chọn 3 (hóa ra là nhanh nhất)

jQuery('#foo').children('div').each(function(){ 
    jQuery(this).addClass('bar') 
}); 

Lựa chọn 4 (hóa ra 2 rất gần)

jQuery('#foo > div').each(function(){ 
    jQuery(this).addClass('bar') 
}); 

Những tất cả hoàn thành những gì tôi muốn. Câu hỏi của tôi là,

Tôi nên sử dụng cái nào hơn cái kia? Tôi nên sử dụng những trường hợp nào .each?

Sửa với đoạn thêm vào trong đó cho thấy sử dụng mỗi là tốt hơn so với methords khác

var t0_start = performance.now(); 
 
$('#parent > div').addClass('bar'); 
 
var t0_end = performance.now(); 
 

 
var t1_start = performance.now(); 
 
$('#parent').children('div').addClass('bar'); 
 
var t1_end = performance.now(); 
 

 
var t2_start = performance.now(); 
 
$('#foo > div').each(function(){ 
 
    $(this).addClass('bar') 
 
});  
 
var t2_end = performance.now(); 
 

 
var t3_start = performance.now(); 
 
$('#foo').children('div').each(function(){ 
 
    $(this).addClass('bar') 
 
});  
 
var t3_end = performance.now(); 
 

 

 
outcome = 'selector: ' + (t0_end - t0_start); 
 
outcome += "\n"; 
 
outcome += 'children(): ' + (t1_end - t1_start) 
 
outcome += "\n"; 
 
outcome += 'selector: each(): ' + (t2_end - t2_start) 
 
outcome += "\n"; 
 
outcome += 'children(): each(): ' + (t3_end - t3_start) 
 
alert(outcome);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="parent"><div></div><div></div><div></div></div>

Kết quả tôi nhận được thời gian cho selector: each() < thời gian cho trẻ em(): mỗi() < thời gian cho bộ chọn: < thời gian cho selector: < thời gian cho trẻ em():

Answer 1

UPDATE: Các thử nghiệm về hiệu suất dường như được tối ưu hóa việc trong thời gian chạy và cung cấp một số con số kỳ lạ. Tôi đã chia các bài kiểm tra thành các đoạn riêng biệt (iframe) để nhận được nhiều số nhất quán hơn.

CẬP NHẬT 2: Đây là jsbin trong đó tôi cố gắng đạt được một số thông tin chi tiết. Phương pháp chọn là trung bình nhanh hơn, nhưng có chồng lên nhau. http://jsbin.com/jiluzu/edit?js,output

CẬP NHẬT 3: jsperf.com đang sao lưu! Nó tiếp tục hỗ trợ "selector" làm phương thức nhanh hơn. http://jsperf.com/jq-selector-vs-children

ORIGINAL: Trong trường hợp cụ thể này, tôi sẽ sử dụng ví dụ đầu tiên. Nó gọn gàng hơn và tiết kiệm cho bạn một cuộc gọi chức năng bổ sung. Ngoài ra, hiện nay phương thức "selector" cũng hoạt động tốt hơn.

$ ('# parent> div');

var start = performance.now(); 
 
$('#parent > div'); 
 
var end = performance.now(); 
 

 
outcome = "$('#parent > div'): " + (end - start); 
 
$('#parent').append(outcome);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="parent"><div></div><div></div><div></div></div>

$ ('# mẹ') con ('div').

var start = performance.now(); 
 
$('#parent').children('div'); 
 
var end = performance.now(); 
 

 
outcome = "$('#parent').children('div'): " + (end - start); 
 
$('#parent').append(outcome);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="parent"><div></div><div></div><div></div></div>

$ ('# foo> div'). Mỗi()

var start = performance.now(); 
 
$('#foo > div').each(function(){}); 
 
var end = performance.now(); 
 

 
outcome = "$('#foo > div').each(): " + (end - start); 
 
$('#parent').append(outcome);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="parent"><div></div><div></div><div></div></div>

$ ('# foo') .children ('div'). mỗi()

var start = performance.now(); 
 
$('#foo').children('div').each(function(){}); 
 
var end = performance.now(); 
 

 
outcome = "$('#foo').children('div').each(): " + (end - start); 
 
$('#parent').append(outcome);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="parent"><div></div><div></div><div></div></div>

---

Khi sử dụng mỗi()

Sử dụng each là hữu ích trong các tình huống mà bạn muốn làm một số thao tác thêm tương ứng với mỗi mục đã chọn.

Ví dụ, nếu chúng ta muốn bổ sung thêm một lớp học để các yếu tố trước của mỗi yếu tố được lựa chọn:

jQuery('#foo').children('div').each(function(){ 
    jQuery(this).addClass('bar'); 
    jQuery(this).prev().addClass('foo'); 
}); 

Answer 2

Với jQuery, phương án 2 và 3 có lẽ là khá tương tự, ngoại trừ với each() bạn có thể thực hiện nhiều hành động trên mỗi phần tử trong vùng chọn bằng cách sử dụng hàm.

Tùy chọn 1 là trình diễn ít nhất trong các trình duyệt cũ hơn như IE8, Chrome 5, Opera 9 với các phiên bản cũ hơn của jQuery. Điều này là do bộ chọn CSS phải được phân tích cú pháp trước khi thực hiện lựa chọn thực tế, về cơ bản chỉ cần gọi tùy chọn 2.

Tại sao bạn không bao giờ nên sử dụng bộ chọn văn bản CSS

$("#parent > .child"); và $("#parent .child"); cả cần phải phân tích chọn và sau đó chỉ cần gọi: $('#parent').children().filter('.child') và $('#parent').filter('.child') tương ứng.

Thông tin khác, bao gồm điểm chuẩn cho trình duyệt cũ, here (từ năm 2010).

---

Trên đây là tin tức cũ dành cho trình duyệt hiện đại và jQuery. Bộ chọn CSS nhanh hơn ngày nay.

Answer 3

Bạn có thể chọn tùy chọn thứ hai vì chúng tôi có thể làm mã toàn diện là tốt.

jQuery('#foo').children().addClass('bar'); 

O/p: <div id="foo"> 
     <div class="bar"></div> 
     <div class="bar"></div> 
     <div class="bar"></div> 
     <div class="bar"></div> 
     <div class="bar"></div> 
     <div class="bar"></div> 
     <div class="bar"></div> 
     <div class="bar"></div> 
    </div>