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

Question

我需要使用JQUERY检查元素是否包含某个子类.

我试过了:

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

没工作.

我的html代码如下所示:

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

Answer 1

最简单的方法是搜索.myClass一个孩子#myElement:

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

如果你只想要一级孩子,你可以使用 >

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

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

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

或仅限初级儿童:

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

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");