Question

我有一个表，表中的每一行都有一个或多个类，具体取决于区域。

以下是我的表格：

<table>
<thead>
    <th>Title</th>
    <th>Name</th>
</thead>
<tbody>
    <tr class="emea apac">
        <td>Testing</td>
        <td>Bob</td>
    </tr>
    <tr class="americas">
        <td>Testing2</td>
        <td>Jim</td>
    </tr>
    <tr class="emea">
        <td>Testing 3</td>
        <td>Kyle</td>
    </tr>
    <tr class="emea americas">
        <td>Testing 3</td>
        <td>Kyle</td>
    </tr>
    <tr class="emea apac americas">
        <td>Testing 3</td>
        <td>Kyle</td>
    </tr>
    <tr class="apac">
        <td>Testing 3</td>
        <td>Kyle</td>
    </tr>
</tbody>

我现在试着特别计算一下这个等级与我的条件相等的行数。

例如：

只有.APAC = 1

的行数

有多少行有3个可能的类？ = 1

我开始使用这个jsFiddle但是从这一点开始无法真正想到如何处理它：http://jsfiddle.net/carlhussey/gkywznnj/4/

Answer 1

var rows = $('tr'),
    class = 'americas',
    counter = 0;
rows.each(function () {
//If current element have .americas increment counter
   if($(this).hasClass(class)) {
       counter +=1    
   }
});
console.log(counter);

Answer 2

从你的小提琴（updated）开始......

$(document).ready(function () {
    var apac = 0,
        emea = 0,
        americas = 0,
        combo = 0,
        all = 0;
    $('table tbody tr').each(function (i, elem) {
        var classes = elem.className.split(' '),
            hasApac = classes.indexOf('apac') > -1,
            hasEmea = classes.indexOf('emea') > -1,
            hasAmericas = classes.indexOf('americas') > -1;
        apac += (hasApac && !hasEmea && !hasAmericas) ? 1 : 0;
        emea += (hasEmea && !hasApac && !hasAmericas) ? 1 : 0;
        americas += (hasAmericas && !hasApac && !hasEmea) ? 1 : 0;
        if (((hasApac && hasEmea) || (hasApac &&  hasAmericas) || (hasEmea && hasAmericas)) && classes.length === 2) {
            combo += 1;
        }
        if (hasApac && hasEmea &&  hasAmericas) {
            all += 1;
        }
    });
    $('span[name="apac"]').text(apac);
    $('span[name="emea"]').text(emea);
    $('span[name="americas"]').text(americas);
    $('span[name="combo"]').text(combo);
    $('span[name="all"]').text(all);
});

<强>更新

我非常确定jQuery的hasClass方法适用于IE8，因此您可以将.each回调更改为：

function (i, elem) {
    var row = $(elem),
        hasApac = row.hasClass('apac'),
        hasEmea = row.hasClass('emea'),
        hasAmericas = row.hasClass('americas');
    apac += (hasApac && !hasEmea && !hasAmericas) ? 1 : 0;
    emea += (hasEmea && !hasApac && !hasAmericas) ? 1 : 0;
    americas += (hasAmericas && !hasApac && !hasEmea) ? 1 : 0;
    if (((hasApac && hasEmea) || (hasApac &&  hasAmericas) || (hasEmea && hasAmericas)) && elem.className.split(' ').length === 2) {
        combo += 1;
    }
    if (hasApac && hasEmea &&  hasAmericas) {
        all += 1;
    }
}

更新了小提琴：http://jsfiddle.net/gkywznnj/6/

Answer 3

http://jsfiddle.net/gkywznnj/8/

Object.size = function(obj) {
    var size = 0, key;
    for (key in obj) {
        if (obj.hasOwnProperty(key)) size++;
    }
    return size;
};

function countOnlyClass(classFindA)
{
    var $trA=$('table tbody tr');
    var count=0; 

    if(classFindA.length>0){

        $trA.each(function(){

            var c=0;    
            var m=0;
            var $tr=$(this);
            var classA = $tr.attr('class').split(' ');

            $.each(classA,function(i,cl){
                if(classFindA.indexOf(cl)>-1) c++; else m++;
            })

            if(c>0 && c==classFindA.length && m==0) count++;

        })
    }        

    return count;
}    

function comboOnlyClass(comboCount)
{
    var $trA=$('table tbody tr');
    var count=0; 

    $trA.each(function(){

        var countClass = {};

        var $tr=$(this);
        var classA = $tr.attr('class').split(' ');

        $.each(classA,function(i,cl){
            if(!cl in countClass )             
                countClass.cl=1;
        })

        if(Object.size(classA )==comboCount) count++;

    })

    return count;
}

var a=countOnlyClass(['apac'])
$('#apac').html(a);

var a=countOnlyClass(['emea'])
$('#emea').html(a);

var a=countOnlyClass(['americas'])
$('#americas').html(a);

var a=countOnlyClass(['apac','emea','americas'])
$('#all').html(a);

var a=comboOnlyClass(2);
$('#combo').html(a);

//var a=comboOnlyClass(1); onlu one class

一个元素包含的特定类的jQuery计数

3 个答案: