Question

我很抱歉这个问题的格式。我知道应该包含一些代码，但我甚至不知道从哪里开始。我需要在另一个类中找到div中最常见的类，其中包含一个特定的符号。问题是找到最常见的一个。

假设有很多div

<div class="mainclass subclass-1 subclass1"></div>
<div class="mainclass subclass-1 subclass3"></div>
<div class="mainclass subclass-2 subclass3"></div>
<div class="mainclass subclass-1 subclass2"></div>
<div class="mainclass subclass-1 subclass1"></div>

如何找到子类-1的总数（在这种情况下？）。类是动态生成的，我永远不知道哪一个是最常见的。

Answer 1

你可以

var counter = {}, //to store the count of occurences temporarely
max; //the most common class
//iterate over te main class
$('.mainclass').each(function () {
    //find the subclass-* value
    var cs = this.className.match(/subclass-\d+/)[0];
    counter[cs] = counter[cs] || 0;
    //increment the count of occurrence
    counter[cs]++;
    if (counter[cs] > (counter[max] || 0)) {
        //if the current one is more then change the max to current class
        max = cs;
    }
});
console.log(max)

演示：Fiddle

如果你想考虑subclass1那么

var counter = {}, //to store the count of occurences temporarely
max; //the most common class
//iterate over te main class
$('.mainclass').each(function () {
    //find the subclass-* value
    var parts = this.className.match(/subclass-?\d+/g);
    $.each(parts, function (i, cs) {
        counter[cs] = counter[cs] || 0;
        //increment the count of occurrence
        counter[cs]++;
        if (counter[cs] > (counter[max] || 0)) {
            //if the current one is more then change the max to current class
            max = cs;
        }
    })
});
console.log(max, counter)

演示：Fiddle

Answer 2

当您知道班级

时，您可以通过以下方式查找班级的用法

var classList = document.getElementById('divId').className.split(/\s+/);
for (var i = 0; i < classList.length; i++) {
   var numItems = $('.'+classList[i]).length;
   console.log('Usage of class '  classList[i] 'is ' numItems ) 
}

Answer 3

您可以使用$.length()功能，然后对结果进行冒泡排序

var numberOfSubClasses = 3
var mostCommonQuant = null;
var mostCommonRef = null;
for(var count =1; count <= numberOfSubClasses; count++)
{
    var ptr = $(".mainclass .subclass-1 .subclass"+count).length;
    if(ptr > mostCommonQuant)
        mostCommonRef = ptr;

}
console.log(mostCommonRef);

Answer 4

这是一个接受NodeList（或HTMLCollection）并返回最常见类的函数。您可以运行此代码段并查看控制台输出。

这是我为此解决方案利用的JavaScript的特定部分。

对象作为关联数组

在JavaScript中，对象是哈希表，我利用它们的属性来存储作为键遇到的类，以及遇到的值作为值。

变量提供的对象属性

在JavaScript中，您可以从变量向对象添加属性。这两个例子在语义上是相同的：

var propName = 'age', 
    obj = {}; 
obj[propName] = 18;  // obj.age === 18

和

var obj = {}; 
obj.age = 18;

立即调用函数表达式（IIFE）

假设我有一些我将使用过的一次性代码，并且封装在函数中可能很有用。我通常使用它来避免使用临时变量来混淆函数名称空间（否则，我需要跟踪它们）。 mostCommonClass()返回调用函数的结果：

function() {
    var maximumName = '',
        maximumValue = 0,
        keys = Object.keys(pairs);

    keys.forEach(function(key) {
      if (pairs[key] > maximumValue) { 
        maximumName = key; 
        maximumValue = pairs[key]; 
      }
    });
    return maximumName; 
};

通过将函数体包装在调用express中来实现。这是一个没有函数体的例子，可以让它更清晰。

return (function() { /* do stuff */ } ());

将整个函数包含在括号中是使语法正确的一种方法，最后的()调用刚刚声明的函数。

＆＃13;

function mostCommonClass(list, omit) { 
  var pairs = {}; 
  for (var i = 0; i < list.length; i++) {
    var classes = list.item(i).classList; 
    for (var j = 0; j < classes.length; j++) { 
      if (pairs[classes[j]]) { 
        pairs[classes[j]]++; 
      } else {
        pairs[classes[j]] = 1; 
      }
    }
  }
  
  if (omit) {
    omit.forEach(function(el) { 
      delete pairs[el];
    }); 
  }
  
  console.log(JSON.stringify(pairs)); 

  return (function() {
    var maximumName = '',
        maximumValue = 0,
        keys = Object.keys(pairs);
    
    keys.forEach(function(key) {
      if (pairs[key] > maximumValue) { 
        maximumName = key; 
        maximumValue = pairs[key]; 
      }
    });
    return maximumName; 
  }()); 
}

console.log(
  mostCommonClass(document.getElementsByClassName('mainclass'), ['mainclass'])
);

＆＃13;

<div class="mainclass subclass-1 subclass1">1</div>
<div class="mainclass subclass-1 subclass3">2</div>
<div class="mainclass subclass-2 subclass3">3</div>
<div class="mainclass subclass-1 subclass2">4</div>
<div class="mainclass subclass-1 subclass1">5</div>

＆＃13;

Answer 5

您可以从以下代码中找到包含其计数的完整类列表。

var classes = new Object();

$("*").each(function() {
    if (this.className.length > 0)
    {
        var arrTmp = this.className.split(" ");
        for (var i=0; i<arrTmp.length; i++)
        {
            if ($.trim(arrTmp[i]).length > 0)
            {
                if (classes[arrTmp[i]])
                    classes[arrTmp[i]] = classes[arrTmp[i]] + 1;
                else
                    classes[arrTmp[i]] = 1;
            }
        }
    }    
});

var sortable = [];
for (var arr in classes)
      sortable.push([arr, classes[arr]])
sortable.sort(function(a, b) {return b[1] - a[1]});

alert(sortable);

测试JsFiddle：https://jsfiddle.net/qsfdm286/

找一个最常见的课程

5 个答案: