元素是某个类的后代吗？答案

【问题标题】：Is element a descendant of some class?元素是某个类的后代吗？
【发布时间】：2014-12-08 19:22:31
【问题描述】：

<div class="blah">
  <div id="hi">Hi</div>
  <div id="hi2">
    <p id="hi3">Hi3</p>
  </div>
</div>

如何用 JavaScript 测试一个元素是否是 blah 类元素的子元素（或孙子或孙子等）？（换一种说法：是否包含元素在 blah 类的元素中）。

注意：经过一些测试，.contains(...) 似乎不是解决方案。

【问题讨论】：

通过jquery遍历
w3schools.com/jquery/jquery_traversing_ancestors.asp
w3schools.com/jquery/jquery_traversing_descendants.asp
@kki3908050 您将如何使用这些 jQuery 遍历祖先方法编写 function isContainedByClass(src,cls)？能举个小例子吗？
我在下面创建了代码，请检查

标签： javascript

【解决方案1】：

遍历父母，检查每一个。

function isContainedByClass(src,cls) {
    while(src && src.tagName) {
        if( src.classList.contains(cls)) return true;
        // apply old-browser compatibility as needed

        src = src.parentNode;
    }
    return false;
}

【讨论】：

您可能应该在回答中明确说明源元素本身已被考虑在内（就像 jQuery 的 closest() 方法一样），因此如果您传递的类也暴露了，则无法匹配祖先按源元素。
@Leo，希望你不是认真的 :) （如果 src 开头是 null 怎么办？）
我想没有人会费心去测试这个。如果没有找到匹配项，它将前进到没有classList 的文档元素，并导致JS 错误。
@torazaburo 已更正，殿下。
我推翻了我的反对意见，但原来的解决方案有两个问题。现在已经解决了在没有匹配项时从 DOM 顶部运行的问题。第二个没有；正如另一位评论者指出的那样，该解决方案实际上仍然不符合规范，该规范说“类元素的子（或孙子，或孙子等）”，而不是“后代或自我” .

【解决方案2】：

使用matches：

elt.matches('.blah *')

见https://developer.mozilla.org/en-US/docs/Web/API/Element.matches。检查浏览器兼容性。

另见Test if a selector matches a given element。

如果您的目标浏览器需要前缀，Modernizr 可以提供帮助：

var ms = Modernizr.prefixed("matchesSelector", HTMLElement.prototype, elt)
ms('.blah *')

见http://modernizr.com/docs/#prefixeddom。

【讨论】：

有点笨拙，但很实用。
使用标准调用但更昂贵：-1 != [].indexOf.call (document.querySelectorAll ('.blah *'), elt)
@HBP 是的，这大概就是 MDN 页面上给出的 polyfill 的作用。
在许多浏览器上似乎不适用于matches，而是带有前缀moz-matches：caniuse.com/#feat=matchesselector ...这很烦人，不得不处理这个...跨度>
@Basj 添加了关于使用 Modernizr 解决该问题的说明。

【解决方案3】：

**check this out**
============================================================================

<!DOCTYPE html>
<html>
<head>
<style>
.a *
{ 
display: block;
border: 2px solid lightgrey;
color: lightgrey;
padding: 5px;
margin: 15px;
}
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
 //for checking if span with class c1 is  children of class a element
   if($('.a').children('span.c1').length > 0) {
        console.log("Found");
     }

//for checking if span with class c1 has  parent element with class a    
     if($('.c1').parents('.a').length > 0) {
        console.log("Found");
     }
  });


</script>
</head>
<body>


<div class="a">a
        <div class="b">b
            <div class="b1">b1</div>
            <div class="b2">b2</div>
            <span class="b3">b3</span>
        </div>

        <div class="c">c</div>
        <span class="c1">c1</span>
        <p class="c2">c2</p>
</div>
</body>
</html>

【讨论】：