Find all html elements in div

Question

I am wondering is there some way to find all html elements in one div and somehow count them? In this example I am trying to get all elements and how many there are in element where I click on:

var divs = ($(e.target).find('div')).length;
var spans = ($(e.target).find('span')).length;

etc for every single one of them?

UPDATE: I don't know how to explain it better with words so:

<div id="someDiv">
<span></span><span></span><span></span><span></span>
<p></p>
<header></header><header></header>
</div>

Do I need to count them one by one or it is way to get all how many times:

span-4
p-1
header-2

Answer 1

Assuming you wanted to count each type of element create a counter object using tagName as keys

 $('#someDiv').click(function() { var counts = {} $(this).find('*').each(function() { var tag = this.tagName.toLowerCase(); counts[tag] = counts[tag] || 0; counts[tag] ++; }); console.log('Header count=', counts.header); console.log(counts); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div id="someDiv">Click me <span></span><span></span><span></span><span></span> <p></p> <header></header> <header></header> </div> 

Answer 2

You could use this and length like :

$('*', this).length;

Hope this helps.

 $('div').on('click', function(){ console.log( 'I HAVE '+ $('*', this).length + ' CHILDS' ); }) 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div>I'm DIV 1 (CLICK ME) <div>Child 1</div> <span>Child 2</span> <div>Child 3</div> </div> <br> <div>I'm DIV 2 (CLICK ME) <div>Child 1</div> <span>Child 2</span> <p>Child 3</p> <div>Child 4</div> <span>Child 5</span> </div> <br><br><br> 

To count every tag you could use each() :

 $('div').on('click', function(){ var _this = $(this); var cbnames = []; _this.children().each(function() { if (!~$.inArray(this.tagName, cbnames)) cbnames.push(this.tagName); }); $.each(cbnames, function(i) { console.log(cbnames[i] + ' = ' + $(cbnames[i], _this).length); }); }) 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div>I'm DIV 1 (CLICK ME) <div>Child 1</div> <span>Child 2</span> <div>Child 3</div> </div> <br> <div>I'm DIV 2 (CLICK ME) <div>Child 1</div> <span>Child 2</span> <p>Child 3</p> <div>Child 4</div> <span>Child 5</span> </div> <br><br><br> 

Answer 3

You can use * and length to count all elements inside the container:

 var num = $("#container *").length; console.log(num); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> <div id="container"> <span>1</span> <span>2</span> <div>3</div> <p>4</p> </div> 

Answer 4

Here is a solution, which goes through all elements and counts them (grouped by tag name).

 var elements = {}; $('#someDiv').find('*').each(function() { var tagName = $(this).prop("tagName"); if(!elements[tagName]) { elements[tagName] = 0; } elements[tagName]++; }); console.log(elements); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div id="someDiv"> <span></span> <span> <span></span> <br></br> <test></test> </span> <span></span> <p></p> <br> <header></header> </div> 

Answer 5

当然，您可以使用$（'＃someId'）。find（'*'）获取元素列表，然后遍历结果以获取数据。