使用jQuery計算數據屬性的值

我有這樣的列表。使用jQuery計算數據屬性的值

<li data-pet="cat"></li> 
<li data-pet="cat"></li> 
<li data-pet="cat"></li> 
<li data-pet="dog"></li>

使用jQuery如何獲取數據屬性的值來計算相同的值是否出現多次。

然後，我想要將一個跨度附加到具有該值的第一個列表元素。

結果應該看起來像這樣。

<li data-pet="cat"><span class="first"></span></li> 
<li data-pet="cat"></li> 
<li data-pet="cat"></li> 
<li data-pet="dog"></li>

感謝您的幫助。

來源

2012-04-16 jamjam

一個可能的實現

(function() { 
    var pets = {}; 
    $('li[data-pet]').each(function() { 
     var li = $(this), 
      pet = li.data('pet'); 

     if (!pets[pet]) { 
      pets[pet] = { firstnode: li, count : 1 } 
     } 
     else { 
      pets[pet]['count'] = pets[pet]['count'] + 1; 
     } 
    }); 

    $.map(pets, function(obj) {  
     if (obj.count > 1) { 
      obj.firstnode.append('<span class="first">'+ obj.count +'</span>'); 
     } 
    }); 
}());

HTML

<li data-pet="cat">cat</li> 
<li data-pet="cat">cat</li> 
<li data-pet="cat">cat</li> 
<li data-pet="dog">dog</li> 
<li data-pet="elephant">elephant</li> 
<li data-pet="elephant">elephant</li>

示例小提琴：http://jsfiddle.net/HJ6gF/6/

來源

2012-04-16 15:15:16 fcalderan

優秀。包括總是很好的觸摸。我也會這樣。謝謝。 – jamjam 2012-04-16 15:21:22

我改變了一點實現，所以代碼更高性能 - 沒有真正需要讀取$ .map函數內部的li節點選擇。 – fcalderan 2012-04-16 15:24:18

一種方式，這將是（你應該優化/根據您的情況neaten它ofcourse）：

var selector = "cat"; 
var selectorCount = 0; 

$("li[data-pet="+selector+"]").each(function() { 
    selectorCount++; 
}); 

if(selectorCount > 1) { 
    $("li[data-pet="+selector+"]").each(function() { 
     $(this).html("<span class=\"first\"></span>"); 
     break; 
    }); 
}

來源

2012-04-16 15:02:15 Ropstah

爲什麼在選擇器上僅選擇'.length'時，需要'.each'？ – 2012-04-16 15:04:14

@Vega：好點 – Ropstah 2012-04-16 15:11:04

感謝您的回答。兩個問題。首先是語法錯誤，也是爲什麼稱爲「貓」的變量。我希望獲得所有數據歸因而不考慮數值，然後對它們進行計數以確定是否存在多次數據。 – jamjam 2012-04-16 15:11:27

var tarr = []; 
$('li').each(function() { 
    tarr.push($(this).attr('data-pet')) 
}); 
var count = $.unique(tarr).length;

來源

2012-04-16 15:02:18 thecodeparadox

來自jQuery API Docs： *「對DOM元素數組進行排序，刪除重複項。請注意，這僅適用於數組DOM元素，**不是字符串或數字**。「* – Aaron 2012-04-16 15:05:00

<li data-pet="cat"/> 
<li data-pet="cat"/> 
<li data-pet="cat"/> 
<li data-pet="dog"/> 

<script type="text/javascript"> 

    var dataPets = []; 

    $('li').each(function(index) 
    { 
     if ($.inArray($(this).attr("data-pet") , dataPets)) 
     { 
      $(this).append("First"); 
     } 

     dataPets[index] = $(this).attr("data-pet"); 
    }); 

</script>

來源

2012-04-16 15:09:49

使用jQuery計算數據屬性的值

回答

相關問題