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 (e.g. 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.tagNames 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/