-9

I want to count number of buttons present inside a div in javascript?

<div id='maindiv'>
    <button></button>
    <button></button>
    <button></button>
    <button></button>
    <button></button>
</div>
Nico.E
  • 82
  • 11
jagdish
  • 1
  • 1
  • 4
  • 1
    `var count = $('#maindiv button').length` this will give you the count – Avi Aug 17 '18 at 12:49
  • 4
    Possible duplicate of [jQuery/JS - Count elements within element](https://stackoverflow.com/questions/8598286/jquery-js-count-elements-within-element) – RainDev Aug 17 '18 at 12:49

4 Answers4

6

Many ways: Javascript: document.querySelectorAll('#maindiv button')

JQuery: $('#maindiv button')

var buttons = document.querySelectorAll('#maindiv button')
console.log(buttons.length)
<div id='maindiv'> <button></button> <button></button> <button></button> <button></button> <button></button> </div>
Ashish Ranjan
  • 12,760
  • 5
  • 27
  • 51
3

you can find all buttons inside div and get length of it

$(function(){
  var count = $('#maindiv button').length;
  console.log(count);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id='maindiv'>
  <button></button>
  <button></button>
  <button></button>
  <button></button>
  <button></button>
</div>
Bhushan Kawadkar
  • 28,279
  • 5
  • 35
  • 57
0

Pure js:

const result = document.querySelectorAll('#maindiv button').length

console.log(result)
<div id='maindiv'> 
  <button></button> <button></button> <button></button> <button></button> <button></button> 
</div>

or for all children:

const result = document.getElementById('maindiv').children.length;

console.log(result)
<div id='maindiv'> 
  <button></button> <button></button> <button></button> <button></button> <button></button> 
</div>
Илья Зеленько
  • 7,509
  • 3
  • 44
  • 55
0

$(function(){ var totalDiv = $('#maindiv').children('button').length; consloe.log(totalDiv) });

jagdish
  • 1
  • 1
  • 4