Question

容器 div.example 可以有不同的第一级子元素（部分， div ，< em> ul ， nav ，...）。这些元素的数量和类型可能会有所不同。

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

jQuery 1.7.1可用，但它应该可以在IE＆lt; 9（array.filter）也是。

编辑：谢谢@Jasper，@ Vega和@Robin Maben：）

Answer 1

使用.children()对子项进行迭代，并记录您找到的element.tagName个数：

//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函数应该更有用..

DEMO

$.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');

如下所示的函数应该为您提供子元素的计数，您可以从中获取最大计数。见下文， DEMO

$(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为您提供出现次数

查找最常出现的DOM元素

3 个答案: