找到一个最常见的类

Find a most common class

本文关键字:常见 一个      更新时间:2023-09-26

我对这个问题的格式感到抱歉。我知道应该包含一些代码,但我甚至不知道从哪里开始。我需要找到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的总数(在这种情况下?)。类是动态生成的,我永远不知道每次哪一个最常见。

您可以

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

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

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/

您可以使用$.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);

当您知道类时,您可以通过以下方式找到该类的用法

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

这里有一个函数,它接受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; 
};

它通过将函数体包装在调用表达式中来实现这一点。下面是一个没有函数体的示例,以使其更加清晰。

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

将整个函数封装在括号中是使此处的语法正确的一种方法,并且末尾的()调用刚刚声明的函数。

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'])
);
<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>