Question

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

如果某个元素是类blah元素的子元素（或孙子元素或者grandgrandchild元素等），如何使用JavaScript进行测试？（以另一种方式表示：如果元素包含在类blah）的元素中。

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

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

Answer 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。

Answer 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>

元素是某类的后代吗？

3 个答案: