如何使用选择器检查所有以相似 id 开头的元素是否隐藏在 Jquery 中？

Question

<div id="reply_div1"> </div>
<div id="reply_div2"> </div>
<div id="reply_div3"> </div>
<div id="reply_div4"> </div>

这个有效：

if ($('#reply_div1').is(":hidden") 
    && $('#reply_div2').is(":hidden") 
    && $('#reply_div3').is(":hidden") 
    && $('#reply_div4').is(":hidden"))
{
      #do something
}

但是这个不起作用：

if ($("div[id^='reply_div']").is(":hidden"))
{
      #do something
}

如何使用选择器检查所有以reply_div开头的元素是否隐藏？

Answer 1

要确定特定集合的所有元素是否都被隐藏，您可以使用:visible选择器，然后测试找到的元素的length是否为0 。

 if ($('div[id^="reply_div"]:visible').length === 0) { console.log('all hidden'); } else { console.log('not all hidden'); }

 #reply_div1, #reply_div2, #reply_div3, #reply_div4 { display: none; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div id="reply_div1">1</div> <div id="reply_div2">2</div> <div id="reply_div3">3</div> <div id="reply_div4">4</div>

Answer 2

检查功能。 如果任何元素未隐藏，它将返回 1，否则返回 0。

 function checkVisibility() { let returnVal = 0; $("div[id^='reply']").each(function() { if(!$(this).is(":hidden")) { returnVal = 1; } }); return returnVal; } console.log(checkVisibility());

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div id="reply_div1"> </div> <div id="reply_div2" style="display:none"> </div> <div id="reply_div3" style="display:none"> </div> <div id="reply_div4" style="display:none"> </div>

Answer 3

您可以使用它，如果任何元素被隐藏，则返回true ，如果它们未隐藏，则返回false

$("div[id^='reply_div']").is(":hidden")