Find DOM-element that occurs the most

Question

A container div.example can have different 1st-level child elements ( section , div , ul , nav , ...). Quantity and type of those elements can vary.

I have to find the type (eg div ) of the direct child that occurs the most. What is a simple jQuery or JavaScript solution?

jQuery 1.7.1 is available, although it should work in IE < 9 (array.filter) as well.

Edit: Thank you @Jasper, @Vega and @Robin Maben :)

Answer 1

Iterate through the children using .children() and log the number of element.tagName s you find:

//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]++;
});

Now the tags object holds the number of each type of tag that occurred as a child of the #parent element.

Here is a demo: http://jsfiddle.net/ZRjtp/ (watch your console for the object)

Then to find the tag that occurred the most you could do this:

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

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

The most_used object now holds the tag used the most and how many times it was used.

Here is a demo: http://jsfiddle.net/ZRjtp/1/

Answer 2

Edit: I think a jQuery function like below should be more useful..

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

And then you can,

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

---

A function like below should give you the count of child elements, from which you can get the max count. See below, 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

That is not possible without some information about the expected types of child nodes.

EDIT : It is possible as Jasper pointed out that we need not know the tag names before hand. The following works in case you're looking only within a specific set of selectors .

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] gives you the tag name and max gives you the occurrence count