如何使用jQuery查找元素是否包含特定类？

Question

我需要使用JQUERY检查一个元素是否包含特定的子类。

我尝试过：

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

没起作用。

我的HTML代码布局如下：

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

- Clinton Jooooones

---

document.getElementById("myElement").getElementsByClassName("myClass").length - Raynos

@Raynos：哈哈...太多的JavaScript了。:P - naveen

Answer 1

最简单的方法是在 #myElement 的子元素中搜索 .myClass ：

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

如果您只想获取一级子元素，您需要使用 >。

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

另一种方法是将选择器传递给find并检查任何结果：

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

或仅适用于一级子元素：

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

- Adam Rackis

---

那不起作用 :/ 我认为它只检查给定元素，而不是子元素。 - Clinton Jooooones

Answer 2

只需使用 QS

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

或者您可以递归遍历子元素

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;
            }
        }
    }
}

使用 recursivelyWalk 和 .classList（可以模拟）。

或者您可以使用 jQuery

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

如果您想要没有 jQuery 的组合操作，则可以尝试 NodeComposite

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

- Raynos

---

你为什么没有按照你的评论使用getElementsByClassName呢？也就是说？ - naveen

@naveen querySelector更短 :) - Raynos

Answer 3

尝试：

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

jQuery对象返回一个数组，其中包含“.length”属性。上述代码检查#myElement中是否有任何.myClass子元素，并且如果有（当.length不为0时），则执行if()语句中的代码。

以下是更明确的版本：

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

你也可以使用$('#myElement .myClass').length，但是对于某些人来说，$.children()更清晰明了。如果要查找不是直接子元素的元素，请使用$.find()代替$.children()。

- Bojangles

Answer 4

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

- Asterisk

---

使用 $('#myElement').children('.myClass').length 更加简洁明了，同时也更少复杂度，可能会更快一些。 - Bojangles