Jquery按列表值div div元素按類別

你好，我想要計算所有可見的div元素與值列表項的值。
項目女巫隱藏有計0
如果我（逐項）做手工計數它的工作原理，在這裏我的例子：Jquery按列表值div div元素按類別

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）

感謝在前進

來源

2012-04-13 Newbie

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

FIDDLE

來源

2012-04-13 15:52:12 adeneo

你好adeno，謝謝你接近我所需要的。我想包括一個櫃檯我另一個腳本。所以給出了列表的值。值All必須爲空''，其他值需要在開始時有點（.black）。你能再幫我一次嗎？ – Newbie 2012-04-13 17:38:24

如果因爲某些原因你不能改變一切，那麼就應該更靠近[FIDDLE]（http://jsfiddle.net/adeneo/aTcR5/1/），但是你應該使用數據atttribute作爲''元素沒有價值，僅僅使用一個常規價值就可以從我的經驗中給予你一點悲傷。 – adeneo 2012-04-14 06:08:00

不完全知道你正在嘗試做的，但對於你可以做的第一個例子

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

來源

2012-04-13 15:52:38

-1

您與JavaScript的距離不遠。

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

什麼你目前擁有的是你已經檢索到的屬性值的長度（希望是有道理的！），但你需要做的，然後使用jQuery以獲取與類的元素是什麼並看看有多少。

以下是jsfiddle的示例。實際上，我認爲你的TOTALCOUNT計算錯誤的，它不應該添加計數器值，因爲你會4結束了，你會想要做的是更多的東西一樣：

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

這可在外面做每個循環。

來源

2012-04-13 15:52:50 cchana

。size（）方法在功能上等同於.length屬性;然而，.length屬性是首選的，因爲它沒有函數調用的開銷。再次，''元素沒有價值，使用數據屬性或其他東西。 – adeneo 2012-04-13 15:56:37

好點，從'.size（）'更改爲'.length'並更新了示例 – cchana 2012-04-13 16:00:59

Jquery按列表值div div元素按類別

回答

相關問題