Bộ chọn jQuery “Tất cả nhưng không”

89

Tôi có thể chọn (sử dụng jQuery) tất cả các div trong đánh dấu HTML như sau:

$('div')

Nhưng tôi muốn loại trừ một cụ thể div(giả sử có id="myid") khỏi lựa chọn ở trên.

Làm cách nào để thực hiện việc này bằng cách sử dụng các hàm Jquery?

javascript jquery jquery-selectors

— siva636
nguồn

2

sử dụng không chọn trong jquery

— Abhijit

171

Đơn giản:

$('div').not('#myid');

Việc sử dụng .not()sẽ xóa các phần tử được khớp bởi bộ chọn được cấp cho nó khỏi tập hợp được trả về $('div').

Bạn cũng có thể sử dụng :not()bộ chọn:

$('div:not(#myid)');

Cả hai bộ chọn đều làm điều tương tự, tuy nhiên :not()nhanh hơn , có lẽ là do công cụ bộ chọn của jQuery Sizzle có thể tối ưu hóa nó thành một .querySelectorAll()cuộc gọi gốc .

— Hình tam giác
nguồn

1

@Raynos Tôi không nghĩ rằng nó nhất thiết phải xấu , nhưng sử dụng .not()là xa, xa hơn :not().

— Bojangle

1

Tôi nghĩ rằng nó nên được $('div:not(#myid)');(không có dấu ngoặc kép). @Raynos: Tại sao? :not()là một bộ chọn CSS3. jQuery có thể trực tiếp vượt qua bộ chọn để querySelectorAllnếu được hỗ trợ ...

— Felix Kling

@FelixKling, nó tốt khi là một phần của bộ chọn4 . Tuy nhiên trong jQuery, nó chậm hơn .notvà ít đọc hơn. Lẽ ra tôi nên nói ": không chọn trong jQuery"

— Raynos

@Raynos: Không có thông số kỹ thuật của Bộ chọn nào cho phép trích dẫn bên trong :not(). Bộ chọn này không phải là mới đối với Bộ chọn 4, cũng như không được thay đổi để cho phép trích dẫn. Tuy nhiên, nó đã được thay đổi để cho phép các bộ chọn phức tạp hơn. Trừ khi tôi hiểu lầm nhận xét của bạn ...

— BoltClock

1

@PeterKrauss tôi chỉ làm một chuẩn mực jsPerf mà dấu querySelectorAlllà nhanh nhất. Không phải là điểm chuẩn trong thế giới thực, nhưng có thể mong đợi khi thấy không có chi phí nào từ nội bộ jQuery. :not()là trong thực tế nhanh hơn, có lẽ vì sizzle biết nó có thể tối ưu hóa nó để sử dụngquerySelectorAll()

— Bojangles

9

var els = toArray(document.getElementsByTagName("div"));
els.splice(els.indexOf(document.getElementById("someId"), 1);

Bạn chỉ có thể làm điều đó theo cách cũ. Không cần jQuery với một cái gì đó quá đơn giản.

Mẹo chuyên nghiệp:

Tập hợp các phần tử dom chỉ là một mảng, vì vậy hãy sử dụng toArrayphương thức yêu thích của bạn trên a NodeList.

Việc thêm các phần tử vào một tập hợp chỉ là

set.push.apply(set, arrOfElements);

Xóa một phần tử khỏi một tập hợp là

set.splice(set.indexOf(el), 1)

Bạn không thể dễ dàng xóa nhiều phần tử cùng một lúc :(

— Raynos
nguồn

1

Ngày nay (2017) có lẽ việc sử dụng Javascript gốc .querySelector()hoặc .querySelectorAll()với div:not(#myid) là nhanh hơn ... Phải không?

— Peter Krauss

8

$("div:not(#myid)")

^[doc]

hoặc là

$("div").not("#myid")

^[doc]

là những cách chính để chọn tất cả trừ một id

Bạn có thể xem demo tại đây

— nguồn gốc
nguồn

Hôm nay (2017) có lẽ $("div:not(#myid)") nhanh hơn ... Kiểm tra tối ưu hóa sizzlejs cho nó, khi sử dụng Javascript gốc .querySelector()hoặc .querySelectorAll().

— Peter Krauss

4

   var elements =  $('div').not('#myid');

Điều này sẽ bao gồm tất cả các div ngoại trừ một div có id 'myid'

— Ehtesham
nguồn

3

$('div:not(#myid)');

đây là những gì bạn cần tôi nghĩ.

— abhijit
nguồn

3

Nên làm vậy:

$('div:not("#myid")')

— iappwebdev
nguồn

3

Bạn sử dụng thuộc .nottính của thư viện jQuery:

$('div').not('#myDiv').css('background-color', '#000000');

Xem nó hoạt động ở đây . Div #myDiv sẽ có màu trắng.

— Kyle
nguồn