CODEWITHSUNDEEP
javascriptjquery
user7402861
user7402861

Reputation:

Find all html elements in div

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

Upvotes: 0

Views: 356

Answers (6)

saket titurkar
saket titurkar

Reputation: 1

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>

Upvotes: 0

charlietfl
charlietfl

Reputation: 171690

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>

Upvotes: 3

Zakaria Acharki
Zakaria Acharki

Reputation: 67525

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>

Upvotes: 1

ssc-hrep3
ssc-hrep3

Reputation: 16089

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>

Upvotes: 1

Molly Harper
Molly Harper

Reputation: 2453

Sure, you could use $('#someId').find('*') to get a list of the elements and then iterate over the results to get your data.

Upvotes: 0

TheYaXxE
TheYaXxE

Reputation: 4294

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>

Upvotes: 1

Related Questions