Question

I would like to search through my HTML code via jQuery to get the div with the most HTML tags. In the example below, jQuery should return #div2 because it contains 4 divs inside it.

<div id="div1">
    <div>content</div>
    <div>content</div>
    <div>content</div>
</div>
<div id="div2">
    <div>content</div>
    <div>content</div>
    <div>content</div>
    <div>content</div>
</div>
<div id="div3">
    <div>content</div>
    <div>content</div>
</div>

Sorry if this example is a bit ambiguous – I didn’t think a very specific block of code was necessary. Thanks in advance.

Answer 1

You can do it by iterating through each div and keeping the div with maximum childs,

Live Demo

maxChild = 0;
maxChildDiv = null;

$('div').each(function(){
    currentChildCount = $(this).children().length 
    if(currentChildCount > maxChild ) 
    {
        maxChild = currentChildCount ;
        maxChildDiv = $(this);
    } 
});