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>

リストは次のようになります:
All (3)
black (1)
blue (1)
green (1)

よろしくお願いします

4

3 に答える 3

4

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

フィドル

于 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の例を次に示します。私は実際にあなたの totalcount が間違って計算されていると思います.4になるので、カウンター値を追加するべきではありません.あなたがしたいことはもっと似ています:

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

そして、これは each ループの外で行うことができます。

于 2012-04-13T15:52:50.893 に答える