找到一个最常见的类
Find a most common class
我对这个问题的格式感到抱歉。我知道应该包含一些代码,但我甚至不知道从哪里开始。我需要找到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>
- 创建一个类似链接的按钮,并通过Javascript函数打开一个新的弹出窗口
- jQuery:循环一个具有不同超时值的循环
- 当包含另一个asp文件时,是否也包含所有引用的样式和脚本页面
- 从javascript创建一个列表
- 节点导出返回一个空对象
- 使用clickToggle并在单击另一个元素时关闭元素
- 我可以在json对象中添加一个函数吗
- 使用javascript将动态表从一个html页面打印到另一个html页
- 将jsp文件下拉列表中的选定项分配给一个java变量(比如String selection)
- 表追加而不附加最后一个元素
- 我如何找到一个句子中的所有空格并替换忽略它们
- D3在一个调用中绘制不同的SVG形状,没有可见性
- 找到一个最常见的类
- 创建一个索引数组,该数组的索引值为 JavaScript 中最常见的数组值
- 单击另一个时,如何折叠打开的常见问题解答
- 创建一个asp.net 5项目来保存常见的js模块
- 为什么我的任何时间DateTimePicker jQuery插件仍然是一个常见的文本框
- 提炼出一个常见的习语
- 我需要创建一个函数来计算输入的不同等级的数量,它只显示最常见的等级
- 一次显示一个常见问题,隐藏其他的