Question

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

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

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

Ex 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 —>
    </ul>

目标输出是：选项a 2 选项b 2 选项c 3 选项d 1 选项e 0 选项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 example

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

Fiddle here.

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

jQuery以编程方式查找AND计算结果中的css类？

4 个答案: