从jquery的style属性中获取div的数量

Question

您好，我正在尝试获取div style display的{​​{1}}的数量。

block

jQuery-

<div class="wrapper">
  <div class="sub" style="display:none">text</div>
  <div class="sub" style="display:block">text</div>
  <div class="sub" style="display:none">text</div>
  <div class="sub" style="display:block">text</div>
  <div class="sub" style="display:none">text</div>
</div>

现在我得到的计数为$(document).ready(function(){ $(".wrapper").each(function(){ var wrapLength = $('.sub').length; $(".sub").each(function(){ if($(".sub").css("display","none")){ wrapLength = wrapLength - 1; } }); alert(wrapLength); }); }); ，但我应该得到的计数为0。请帮忙。

Answer 1

您可以将jQuery .filter()方法与Javascript style属性结合使用：

let shownSubs = $('.sub').filter((_,e) => e.style.display == 'block');
console.log(shownSubs.length);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="wrapper">
  <div class="sub" style="display:none">text</div>
  <div class="sub" style="display:block">text</div>
  <div class="sub" style="display:none">text</div>
  <div class="sub" style="display:block">text</div>
  <div class="sub" style="display:none">text</div>
</div>

Answer 2

您只需执行$('.sub:hidden').length即可获得display:none和$('.sub:visible').length;元素计数。

$(document).ready(function(){
    $(".wrapper").each(function(){
        var wrapLength = $('.sub:hidden').length;
        console.log(`Hidden count: ${wrapLength}`);
        var visibleLength = $('.sub:visible').length;
        console.log(`Visible count: ${visibleLength}`)
    }); 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="wrapper">
  <div class="sub" style="display:none">text</div>
  <div class="sub" style="display:block">text</div>
  <div class="sub" style="display:none">text</div>
  <div class="sub" style="display:block">text</div>
  <div class="sub" style="display:none">text</div>
</div>

Answer 3

$(document).ready(function() {
            var count_none = 0;
            $(".sub").each(function() {
                    var style_el = $(this).attr('style');
                    if (style_el == 'display:none') {
                        count_none++;
                    }
                });
                console.log(count_none);
            });

Answer 4

$(function(){
var count=0;
$(".sub").each(function(){
if($(this).css("display")=='block'){
count++;
}
})
alert("total display blocked items :"+count);

})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="wrapper">
  <div class="sub" style="display:none">text</div>
  <div class="sub" style="display:block">text</div>
  <div class="sub" style="display:none">text</div>
  <div class="sub" style="display:block">text</div>
  <div class="sub" style="display:none">text</div>
</div>

希望这可以解决您的查询。