1

您好，我想用列表项的值计算所有可见的 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)

谢谢转发

4

3 回答 3

4

<a>元素没有属性值，要计算具有可见类的元素，请执行以下操作：

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

....etc

请注意，只是“可见性：隐藏”的元素被认为是可见的，这不适用于此类元素。

这是我的做法：

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+')');
        }
    });
});​

小提琴

于 2012-04-13T15:52:12.207 回答
0

不完全确定您要做什么，但是对于第一个示例，您可以做

var counter = $('div.element').not('.hidden').length
于 2012-04-13T15:52:38.227 回答
-1

你的 JavaScript 离你不远了。

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

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

这是关于jsfiddle的示例。我实际上认为您的总数计算错误，它不应该添加计数器值，因为您最终会得到 4，您想要做的更像是：

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

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

于 2012-04-13T15:52:50.893 回答