Как использовать селектор, чтобы проверить, что все элементы начинаются с идентичного идентификатора, скрытого в 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

Проверьте функцию. Он вернет вам 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 2

Чтобы определить, являются ли все элементы указанного набора c скрытыми, вы можете использовать селектор :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 3

вы можете использовать это и вернет true , если какой-либо из элементов скрыт, и false , если они не скрыты

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