javascript - 查找出现次数最多的 DOM 元素

Question

容器div.example可以有不同的 1 级子元素（section、div、ul、nav ……）。这些元素的数量和类型可能会有所不同。

我必须找到出现最多的直接孩子的类型（例如div）。什么是简单的 jQuery 或 JavaScript 解决方案？

jQuery 1.7.1 是可用的，尽管它也应该在 IE < 9 (array.filter) 中工作。

编辑：谢谢@Jasper、@Vega 和@Robin Maben :)

Answer 1

使用.children()并记录element.tagName您找到的 s 数量：

//create object to store data
var tags = {};

//iterate through the children
$.each($('#parent').children(), function () {

    //get the type of tag we are looking-at
    var name = this.tagName.toLowerCase();

    //if we haven't logged this type of tag yet, initialize it in the `tags` object
    if (typeof tags[name] == 'undefined') {
        tags[name] = 0;
    }

    //and increment the count for this tag
    tags[name]++;
});

现在该对象保存了作为元素的子元素tags出现的每种类型标签的数量。#parent

这是一个演示： http: //jsfiddle.net/ZRjtp/（查看控制台中的对象）

然后找到出现最多的标签，你可以这样做：

var most_used = {
        count : 0,
        tag   : ''
    };

$.each(tags, function (key, val) {
    if (val > most_used.count) {
        most_used.count = val;
        most_used.tag   = key;
    }
});

该most_used对象现在包含使用最多的标签以及使用次数。

这是一个演示：http: //jsfiddle.net/ZRjtp/1/

Answer 2

编辑：我认为像下面这样的 jQuery 函数应该更有用..

演示

$.fn.theMostChild = function() {
    var childs = {};
    $(this).children().each(function() {
        if (childs.hasOwnProperty(this.nodeName)) {
            childs[this.nodeName] += 1;
        } else {
            childs[this.nodeName] = 1;
        }
    });
    var maxNode = '', maxNodeCount = 0;
    for (nodeName in childs) {
        if (childs[nodeName] > maxNodeCount) {
            maxNode = nodeName;
            maxNodeCount = childs[nodeName];
        }
    }
    return $(maxNode);
}

然后你可以，

$('div.example').theMostChild().css('color', 'red');

---

像下面这样的函数应该为您提供子元素的数量，您可以从中获得最大数量。见下文， 演示

$(function () {
    var childs = {};
    $('div.example').children().each(function () {
        if (childs.hasOwnProperty(this.nodeName)) {
            childs[this.nodeName] += 1;
        } else {
            childs[this.nodeName] = 1;
        }
    });

    for (i in childs) {
        console.log(i + ': ' + childs[i]);
    }
});

Answer 3

如果没有有关预期子节点类型的一些信息，这是不可能的。

编辑：正如Jasper指出的那样，我们可能不需要事先知道标签名称。如果您只在一组特定的选择器中查找，则以下内容有效。

var selectorArray = ['div', 'span', 'p',........]

var matches = $(div).children(selectorArray.join());    
var max = 0, result = [];    
$.each(selectorArray, function(i, selector){

    var l = matches.filter(selector).length;
    if(l > max){
     max = l;
     result[max] = selector;
    }

});

result[max]为您提供标签名称并max为您提供出现次数