jQuery: lọc ra các phần tử thông qua lớp học?

Question

Tôi có một trang web có một danh sách dài các tên. Để làm cho nó nhiều hơn giám sát-thể, tôi muốn đặt một liên kết văn bản trong để

(khi nạp) hiển thị tất cả

(trên cách nhấn vào chữ "lê") ẩn tất cả các yếu tố với class = "apple "

(trên cách nhấn vào chữ 'táo') ẩn tất cả các yếu tố với class =" lê"

(trên nhấp vào 'hiển thị tất cả') hiển thị tất cả

tôi cho rằng nó muốn được giống như một thực sự đơn giản phiên bản của "khi bạn nhập" lọc.

Trình cắm có tồn tại không? Tôi thậm chí không biết bắt đầu từ đâu!

Answer 1

hmm .. nếu bạn đã có một danh sách như sau:

<span class="apple">red apple</span> 
<span class="apple">green apple</span> 
<span class="pear">big pear</span> 
<span class="pear">little pear</span> 

sau đây sẽ hiển thị tất cả:

$("span.*").show(); 

sau đây sẽ ẩn tất cả các yếu tố với 'class = "apple"' :

$("span[class='apple']").hide(); 

hoặc bạn có thể ẩn với mọi thứ không có 'class = "pear"':

$("span[class!='pear']").hide(); 

Answer 2

Chỉ cần truy cập vào bài đăng này, tôi biết nó cũ nhưng thành thật mà nói thì không có câu trả lời nào được đưa ra khá hữu ích. Theo ý kiến ​​của tôi, bạn có thể lọc ra các phần tử bằng cách sử dụng bộ lọc với : không phải, như trong filter(':not()').

Như Joel Potter tuyên bố, sử dụng $("span[class='apple']").hide(); sẽ chỉ chọn những nhịp với chính xác một classname, táo. Nếu có nhiều lớp (có nhiều khả năng) thì cách tiếp cận như vậy sẽ không hoạt động.

Nếu bạn nhấp vào một từ, ví dụ: lê, sau đó bạn có thể lọc ra các thành phần làm không chứa lớp pears.

$('span').show().filter(':not(.pears)').hide(); 

và bạn đã hoàn tất;)

Answer 3

Để lọc ra các yếu tố có chứa một lớp nhất định hoặc bất kỳ giá trị thuộc tính khác, sử dụng Attribute Contains Word Selector sẽ là một giải pháp tốt:

$("span").filter("[class~='apple']") 

Trên thực tế , đối với thuộc tính lớp, thậm chí còn dễ dàng hơn để chỉ viết:

$("span").filter(".apple") // or: 
$("span.apple") 

[Thi s cũng là những gì Joel Potter đã viết trong bình luận của mình để this answer.]

Bằng cách đó bạn sẽ có thể để phù hợp với tất cả các bên dưới:

<span class="apple">...</span> 
<span class="apple fruit">...</span> 
<span class="fruit apple sweet">...</span> 

Vì vậy, bất cứ khi nào bạn không chắc chắn 100% rằng bạn sẽ chỉ có một lớp duy nhất đặt trên một phần tử, sử dụng nhà điều hành ~=.