Làm cách nào để biết liệu một phần tử có khớp với bộ chọn không?

Question

Giả sử tôi có phần tử DOM - làm cách nào tôi có thể biết liệu nó có khớp với bộ chọn jQuery hay không, chẳng hạn như p hoặc .myclass? Thật dễ dàng để sử dụng bộ chọn để khớp với phần tử con của phần tử, nhưng tôi muốn một câu trả lời đúng/sai cho dù yếu tố cụ thể này có phù hợp không?

Phần tử có thể không có ID (và tôi không thể chỉ định một phần tử ngẫu nhiên vì lý do vượt quá điều này), vì vậy tôi không thể áp dụng công cụ chọn của mình cho phụ huynh của phần tử và tìm kiếm trẻ có cùng ID như của tôi .

Điều này có hoạt động như dự định không? Tôi không thể tìm ra các so sánh đối tượng Javascript.

$(selector, myElement.parentNode).each({ 
    if (this == myElement) // Found it 
}); 

Có vẻ như sẽ có một cách dễ dàng để xem liệu một phần tử DOM phù hợp với một bộ chọn jQuery ...

Answer 1

Bạn có thể sử dụng phương pháp is():

if($(this).is("p")){ 
// ... 
} 

Answer 2

Tôi tin rằng is() phương pháp là những gì bạn đang tìm kiếm.

Nếu không, bạn có thể chỉ cần thử chọn mục trực tiếp, nếu đó là ý của bạn.

Vì vậy, nếu nó là một "a" với một lớp học của "myclass", chỉ cần làm $ ("a.myclass")

Answer 3

tôi có thể không áp dụng selector của tôi để cha mẹ phần tử và tìm kiếm trẻ em có cùng ID như của tôi.

Bạn vẫn không thể làm điều đó - thuộc tính id phải là duy nhất.

Answer 4

Có lẽ bạn chỉ muốn:

$(".complicated #selector p.with > div.manyParts").length 

Nếu không có trận đấu, chiều dài trả về 0, đó là falsy, vì vậy bạn có thể sử dụng nó trong một tuyên bố if, như:

if($(".doesThis #exist").length) { 
    // Do things 
} 

lẽ sẽ là giá trị lưu trữ nó trong một biến riêng biệt và THEN kiểm tra chiều dài; theo cách đó, nếu bạn cần làm bất cứ điều gì với các phần tử phù hợp, bạn không phải thực hiện lại cùng một bộ chọn.

Answer 5

Without jQuery, sử dụng Element.matches():

// lets define 2 variables pointing to ordinary <div> elements 
 
var elm1 = document.querySelector('div'); 
 
var elm2 = elm1.nextElementSibling; 
 

 
console.log(
 
    elm1.matches('.foo'),   // true 
 
    elm1.matches('.bar'),   // false 
 
    elm2.matches('[title=bar]'), // true 
 
)

<div class='foo'></div> 
 
<div title='bar'></div>

---

See supported browsers list