jquery - jQuery 以编程方式在结果中查找并计算 css 类？

Question

我有一个数据库结果页面作为列表项，每个结果都具有动态分配（但不知道）的几个可能的 css 类，用于过滤目的。

使用 jQuery 如何以编程方式查找分配给每个 li 的类，并计算页面上每个类出现的频率？

我需要能够通过 css 类的名称访问它们，以更新页面上的 html。

前 html

    <ul class="results">
      <li class="a b c d>...</li>
      <li class="a c>...</li>
      <li class="b c f>...</li>
      <!— many more li —&gt;
    </ul>

目标输出为： option a 2 option b 2 option c 3 option d 1 option e 0 option f 1 ...

其中“选项 a”是页面上已有的过滤器，计数将显示在其旁边。我已准备好过滤器以接受 html 更新：

echo ' <span class="' . $row_rsCategories['category'] . '"></span>';

其中类别是过滤器的名称。

Answer 1

这将创建一个对象 ，classes其中包含应用于每个列表项的所有类的计数。

var classes = {}; //{a: 2, b: 2, c: 3, d: 1, : 1, f: 1} 
$(".results li").each(function() {
   $.each(this.className.split(" "), function(i, cls) {
       classes[cls] = classes[cls] + 1 || 1;
   });
});

JSFiddle 示例

Answer 2

试试这个：

var li = [];
var cnt = [];
$(".results").find("li").each(function () {
    var cls = $(this).attr("class").split(" ");

    var len = cls.length;
    for (var i = 0; i < len; i++) {
        if (li.indexOf(cls[i]) < 0) {
            li.push(cls[i]);
            cnt.push(1);
        } else {
            cnt[li.indexOf(cls[i])] = cnt[li.indexOf(cls[i])] + 1;
        }
    }
});

在这里拉小提琴。

Answer 3

就像是：

var classObject = {}
$("ul.results li").each(function() {
    var classes = this.className.split(" ");
    for (var i = 0; i < classes.length; i++) {
        if (classObject.hasOwnProperty(classes[i]))
            classObject[classes[i]]++;
        else
            classObject[classes[i]] = 1;
    }
});

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

Answer 4

一个简单的方法：

function classCount(el, prefix){
    // define the prefix, with a default in case a prefix is not supplied:
    prefix = prefix || '';

    /* use the passed-in selector to find the relevant element(s) (with a class)
       to search within:
    */
    var els = $(el).find('[class]'),
        // initialise variables to avoid declaring them within a loop:
        results = {},
        classes = [];

    // iterate over the elements found earlier
    els.each(function(){
        // find the classes of the element:
        classes = this.className.split(/\s+/);

        iterate over those classes:
        for (var i = 0, len = classes.length; i < len; i++){
            /* if there isn't a current property in the results object
               for the current class-name, create and initialise it:
            */
            if (!results[classes[i]]) {
                results[prefix + classes[i]] = 1;
            }
            // if it already exists, increment it:
            else {
                results[prefix + classes[i]]++;
            }
        }
    });

    // return the resulting object to the calling context:
    return results;
}

console.log(classCount('.results', 'option '));

JS 小提琴演示。