Làm cách nào để tìm một phần tử chứa một lớp cụ thể?

Question

Tôi cần kiểm tra xem một phần tử có chứa một lớp con nào đó bằng cách sử dụng JQUERY hay không.

tôi đã cố gắng:

if ($('#myElement').has('.myClass')) { 
    do work son 
} 

Đã không làm việc.

mã html của tôi được đặt ra như thế này:

<div id="myElement"> 
    <img> 
    <span>something</span> 
    <span class="myClass">Hello</span> 
</div> 

Answer 1

Cách đơn giản nhất sẽ được tìm kiếm .myClass như một đứa trẻ của #myElement:

if($('#myElement .myClass')).length > 0) 

Nếu bạn chỉ muốn trẻ em cấp độ đầu tiên, bạn muốn sử dụng >

if($('#myElement > .myClass')).length > 0) 

---

Một cách khác sẽ được đi qua một selector để find và kiểm tra đối với bất kỳ kết quả:

if($('#myElement').find('.myClass').length > 0) 

Hoặc chỉ trẻ em cấp độ đầu tiên:

if($('#myElement').children('.myClass').length > 0) 

Answer 2

Chỉ cần sử dụng QS

var hasClass = document.getElementById("myElement").querySelector(".myClass");

hoặc bạn có thể tái chế cho trẻ em

var element = document.getElementById("myElement"); 

var hasClass = recursivelyWalk(element.childNodes, function hasClass(node) { 
    return node.classList.contains("myClass"); 
}); 

function recursivelyWalk(nodes, cb) { 
    for (var i = 0, len = nodes.length; i < len; i++) { 
     var node = nodes[i]; 
     var ret = cb(node); 
     if (ret) { 
      return ret; 
     } 
     if (node.childNodes && node.childNodes.length) { 
      var ret = recursivelyWalk(node.childNodes, cb); 
      if (ret) { 
       return ret; 
      } 
     } 
    } 
} 

Sử dụng recursivelyWalk và .classList (có thể được làm mờ).

Hoặc bạn có thể sử dụng jQuery

$("#myElement .myClass").hasClass("myClass");

hoặc nếu bạn muốn hoạt động tổng hợp mà không cần jQuery sau đó thử NodeComposite

NodeComposite.$("#myElement *").classList.contains("myClass");

Answer 3

Hãy thử:

if($('#myElement').children('.myClass').length) { 
    // Do what you need to 
} 

Đối tượng jQuery trả về một mảng có thuộc tính .length. Đoạn mã trên sẽ kiểm tra nếu có bất kỳ số .myClass nào trong số #myElement và nếu có (khi .length không phải là 0), hãy thực thi mã bên trong câu lệnh if().

Dưới đây là một phiên bản rõ ràng hơn:

if($('#myElement').children('.myClass').length > 0) { 
    // Do what you need to 
} 

Bạn luôn có thể sử dụng $('#myElement .myClass').length quá, nhưng $.children() là rõ ràng hơn đối với một số. Để tìm các yếu tố không phải là trực tiếp trẻ em, hãy sử dụng $.find() thay cho $.children().

Answer 4

if($.contains($('#myElement'), $('.myClass'))){ 
    alert("True"); 
} 
else{alert("False")};