Chọn tất cả các phần tử con ngoại trừ phần tử đầu tiên


81

Giả sử tôi có những thứ sau:

<ul>
 <li>First item</li>
 <li>Second item</li>
 <li>Third item</li>
</ul>

Làm cách nào để chọn tất cả các phần tử con sau phần tử đầu tiên bằng jQuery? Vì vậy, tôi có thể đạt được những thứ như:

<ul>
 <li>First item</li>
 <li class="something">Second item</li>
 <li class="something">Third item</li>
</ul>

Câu trả lời:



36

Dựa trên phân tích hoàn toàn không khoa học của tôi về bốn phương pháp ở đây, có vẻ như không có nhiều sự khác biệt về tốc độ giữa chúng. Tôi đã chạy từng danh sách trên một trang chứa một loạt danh sách không có thứ tự có độ dài khác nhau và định thời gian cho chúng bằng cách sử dụng trình biên dịch Firebug.

$("li").slice(1).addClass("something");

Thời gian trung bình: 5.322ms

$("li:gt(0)").addClass("something");

Thời gian trung bình: 5.590ms

$("li:not(:first-child)").addClass("something");

Thời gian trung bình: 6.084ms

$("ul li+li").addClass("something");

Thời gian trung bình: 7.831ms


3
Tôi đã gặp câu hỏi này vì tôi cần có tất cả trẻ em, trừ đứa trẻ đầu tiên. Tôi đã làm điều này trên tất cả các h3 có trong một div. Tôi đã chạy ba trong số các truy vấn giống như bạn ở trên trên trang của tôi và kết quả: not (: first-child) là nhanh nhất gấp 2-3 lần. Tôi nghĩ cách cấu trúc trang của bạn cũng có thể ảnh hưởng đến tốc độ hồ sơ. Dù bằng cách nào thì câu trả lời này đã dạy tôi cách sử dụng trình biên dịch Firebug và tôi cảm ơn bạn vì điều đó.
RedWolves

13

http://docs.jquery.com/Traversing/slice

$("li").slice(1).addClass("something");

Đây là một câu trả lời hay, nhưng tôi cảm thấy những gì tôi đã chọn làm câu trả lời là cách sử dụng rõ ràng hơn. Bất kỳ ai mới tham gia dự án sẽ nắm bắt nhanh hơn những gì đang được thực hiện trong bộ chọn.
Chris Canal

9

Một truy vấn thanh lịch hơn (chọn tất cả các phần tử li đứng trước một phần tử li):

$('ul li+li')


1
$ ("li + li") có khả năng sẽ hoạt động nhanh hơn sau đó $ ("li: not (: first-child)")
Sergey Ilinsky

3

tôi sẽ sử dụng

$("li:gt(0)").addClass("something");

2

Điều này sẽ hoạt động

$('ul :not(:first-child)').addClass('something');

1

Đây là những gì tôi đã làm việc cho đến nay

$('.certificateList input:checkbox:gt(0)')

0

Sử dụng phương thức jQuery .not ()

$('li').not(':first').addClass('something');

HOẶC LÀ

var firstElement = $('li').first();
$('li').not(firstElement).addClass('something');
Khi sử dụng trang web của chúng tôi, bạn xác nhận rằng bạn đã đọc và hiểu Chính sách cookieChính sách bảo mật của chúng tôi.
Licensed under cc by-sa 3.0 with attribution required.