如何使用选择器检查所有以相似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

检查功能。如果没有隐藏任何元素，它将 return 你 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

你可以使用它，如果有任何元素被隐藏，将 return true 如果不是，则 false隐藏

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

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

How to use selector to check all elements start with similar id is hidden in Jquery?

jquery

element

selector

hidden