Найти наиболее распространенный класс

Question

Извините за формат этого вопроса. Я знаю, должен включать некоторый код, но я даже не знаю, с чего начать. Мне нужно найти наиболее распространенный класс среди divs с другим классом, содержащий определенный символ. Проблема заключается в том, чтобы найти наиболее распространенный.

Допустим, есть ряд дивы

<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 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/

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

Вы можете

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 4

Вы можете использовать $.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 5

Вот функция, которая принимает 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>