Question

我有这样的名单。

<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>

感谢您的帮助。

Answer 1

可能的实施

(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/

Answer 2

这样做的方法是（你应该根据你的情况来优化/消除它）：

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;
    });
}

Answer 3

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

Answer 4

<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>

使用jQuery计算data-attribute的值

4 个答案: