jquery - 在 div 中每个类只显示一个元素并计算它们

Question

我有一个名为“items”的 div，在其中我有一些其他 div 以及其他类（.itema、.itemb、.itemc 等），我希望每个 div 只显示一个元素并计算它们（只有那些仍在“项目”div上）。

我尝试使用以下代码来计算它们......但没有奏效：

var na = $('#items.itema').size();
$('.itema').append(' x ', na);

var nb = $('#items.itemb').size();
$('.itemb').append(' x ', nb);

这是我的失败尝试：http: //jsfiddle.net/g32gH/

Answer 1

#items.itema选择具有idofitems和类的元素itema。你想#items用一个类来选择其中的所有元素itema，这是用后代组合器（一个空格）完成的：

#items .itema

演示：http: //jsfiddle.net/g32gH/3/

Answer 2

只需将代码更改为：

var na = $('#items .itema').size();
$('.itema').append(' x ', na);

var nb = $('#items .itemb').size();
$('.itemb').append(' x ', nb);

这是更新的 jsFiddle：http: //jsfiddle.net/leniel/g32gH/12/

---

现在我看到您正在使用jQuery UI 可排序组件。我想你想要这样的东西：

$("#items").sortable({
    connectWith: "#other"
});

$("#other").sortable({
    connectWith: "#items"
});   

$("#other, #items").on("sortreceive", function(event, ui)
{
    var na = $('#items .itema').size();
    $('.itema').html('itema X ' + na);

    var nb = $('#items .itemb').size();
    $('.itemb').html('itemb X ' + nb);  
});

这是 JS Bin 演示：http: //jsbin.com/ixowed/1/edit

Answer 3

$(document).ready(function(){
    var items = new Array();
    $('#items p').each(function(i,element){

      items[$(element).attr('class')]++;
    });
    $(items).each(function(clas,count){
      $(clas).hide();
      $(clas).first().show().append(' X '+count);
    });
 });