使用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计算数据属性的值

回答

相关问题