Question

您好我想要计算列表项中值的所有可见div元素。
隐藏物品的数量为0 如果我手工计数（逐项）它可以工作，这里是我的例子：

 var counter = $(".green").length-$(".green.hidden").length;

这是我的页面，我想如何使用它：

<html>
<head>
<script type="text/javascript" src="/jquery/jquery-1.7.1.min.js">
</script>
<style>
  a {text-decoration: none; }
  div { border:1px solid grey; width:200px; height: 10px; margin:3px; }
  .black { background-color:black; }
  .blue { background-color:blue; }
  .green { background-color:green; }
  .hidden { visibility:hidden; }
</style>
</head>
<body>
<ul id="list1"> 
  <li><a href="" value="">all<span></span></a></li>
  <li><a href="" value=".black">black<span></span></a></li>
  <li><a href="" value=".blue">blue<span></span></a></li>
  <li><a href="" value=".green">green<span></span></a></li>
</ul>
<div class="element black"></div>
<div class="element green hidden"></div>
<div class="element blue"></div>
<div class="element green "></div>
<script>
$(function(){
 var totalcount = 0;
 var counter = 0;
$("li a").each(function(){
 var counter = $(this).attr("value").length;
 var totalcount = totalcount+counter;

   $(this).find("span").html(" (" + counter + ") ");
});
   $("span", 'a[value|=""]').html(" (" + totalcount + ")");
});
</script>
</body>
</html>

列表必须如下所示：
全部（3）
黑色（1）
蓝色（1）
绿色（1）

先谢谢

Answer 1

<a>元素没有属性值，用于计算具有可见类的元素：

var all = $('.element').filter(":visible").length,
    green = $('.green:visible').length,

....etc

请注意，只有'visibility：hidden'的元素才会被视为可见，这对这些元素无效。

我将如何做到这一点：

HTML：

<ul id="list1"> 
  <li><a href="#" data-color="all">all<span></span></a></li>
  <li><a href="#" data-color="black">black<span></span></a></li>
  <li><a href="#" data-color="blue">blue<span></span></a></li>
  <li><a href="#" data-color="green">green<span></span></a></li>
</ul>
<div class="element black"></div>
<div class="element green hidden"></div>
<div class="element blue"></div>
<div class="element green "></div>

jQuery的：

$(function(){
    $.each($('li a'), function(index, item) {
        if ($(item).data('color')=='all') {
            $('span', item).text(' ('+$('.element:visible').length+')');
        }else{
            $('span', item).text(' ('+$('.'+$(item).data('color')+':visible').length+')');
        }
    });
});

FIDDLE

Answer 2

不完全确定你要做什么，但对于第一个例子，你可以做

var counter = $('div.element').not('.hidden').length

Answer 3

你与JavaScript的关系并不遥远。

var counter = $($(this).attr("value")).length;

您目前拥有的是您检索到的属性值的长度（希望有意义！），但您需要做的是使用jQuery获取该类的所有元素并查看有多少有。。

以下是jsfiddle的示例。我实际上认为你的totalcount计算错误，它不应该添加计数器值，因为你最终得到4，你想要做的更像是：

var totalcount = $('.element').length;

这可以在每个循环之外完成。

Jquery从列表值中按类计算div元素

3 个答案: