Cách tìm các yếu tố khớp với nhiều điều kiện

Question

Điều tôi cần làm là tìm tất cả các thành phần trên trang có chứa "thẻ" trong thuộc tính href và văn bản của phần tử chứa một từ nhất định.

Ví dụ

<a href="/my/tag/item2">cars</a> 

Tôi biết tôi có thể nhận được tất cả một yếu tố với thẻ trong href như thế này:

$("a[href*=tag]"); 

Tôi cũng có thể tìm thấy tất cả một yếu tố với 'xe' trong văn bản như thế này:

$("a:contains('cars')"); 

Nhưng làm cách nào để kết hợp 2 điều kiện này thành một tuyên bố có nội dung: Tìm tất cả các phần tử chứa 'thẻ' trong href và chứa 'xe hơi' trong văn bản?

Answer 1

Bạn đã thử $("a[href*=tag]:contains('cars')"); chưa?

Bạn có thể tiếp tục và mãi mãi như vậy, tức là

$("a.className.anotherClass[href*=tag][title=test]:contains('cars'):visible"); 

Answer 2

Như những kẻ khác nói hoặc, nếu hai điều kiện cần phải được áp dụng riêng biệt, với một số mã khác ở giữa ví dụ, sau đó. ..

var $tags = $("a[href*=tag]"); 

sau đó ...

var $carTags = $tags.filter(":contains('cars')"); 

.filter() là tổng quát phương pháp để giảm một lựa chọn jQuery hiện có.

Giống như nhiều phương pháp jQuery khác .filter() trả về một đối tượng jQuery nên nó sẽ chuỗi:

var $foo = $("a[href*=tag]").filter(":contains('cars')").filter(".myClass"); 

.filter() cũng tốt vì các lý do tôi không muốn giải thích, và tôi không cần phải vì @ bažmegakapa vừa làm rất hùng hồn.

Answer 3

Các câu trả lời khác cho thấy các ví dụ tốt và làm việc. Nhưng có một điều thú vị ở đây, sự khác biệt giữa native CSS selectors (cũng được hỗ trợ bởi số querySelectorAll()) và selectors defined by jQuery.

Trộn chúng có thể không may mắn, vì sau đó không thể sử dụng động cơ gốc nhanh hơn nhiều. Ví dụ trên :has() jQuery tài liệu nhà nước:

Bởi vì: có() là một phần mở rộng jQuery và không một phần của đặc tả CSS , truy vấn sử dụng: có() không thể tận dụng lợi thế của tăng hiệu suất cung cấp bởi phương thức DOM querySelectorAll() .

Vì lý do này, bạn có thể tốt hơn tắt truy vấn với các phương pháp tự nhiên và sau đó filtering bằng cách sử dụng bất kỳ bộ chọn cụ thể jQuery:

var $res = $("a[href*=tag]").filter(":contains('cars')");