Question

我有三个同一类的div，在这些div中我有其他div有两个不同的类：

<div class="TotalResults">
<div class="resultPassed"></div>
</div>

<div class="TotalResults">
<div class="resultPassed"></div>
</div>

<div class="TotalResults">
<div class="resultError"></div>
</div>

我想隐藏所有在其中class="resultPassed"的div。我怎么能用javascript或jquery做到这一点？

Answer 1

这应该有效：

$('.resultPassed').parent().hide()

Answer 2

试一试：

$("div").has(".resultPassed").hide();

最终代码：

<!DOCTYPE html>
<html>
<head>
    
</head>
<body> 
     <div class="TotalResults">
         <div class="resultPassed">I am resultPassed</div>
    </div>
    
    <div class="TotalResults">
        <div class="resultPassed">I am resultPassed</div>
    </div>
    
    <div class="TotalResults">
        <div class="resultError">I am not resultPassed</div>
    </div>
    
    <button class="btn">Hide</button>
    
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
    <script>        
    $(document).ready(function(){
        
        $(".btn").on("click",function(){
            $("div").has(".resultPassed").hide(1000);
        })
        
    })
    </script>
</body>
</html>

Answer 3

在Jquery -

$('.resultPassed').parent().hide()会将显示更改为无。

在纯JS中 -

var arr = document.getElementsByClassName("resultPassed"); 

for (var i = 0; i < arr.length; i++) {
    arr[i].parentNode.style.display = "none";
}

隐藏包含内部元素的所有div

3 个答案: