计算div中存在的按钮数

Question

我要计算javascript的div中存在的按钮数吗？

<div id='maindiv'>
    <button></button>
    <button></button>
    <button></button>
    <button></button>
    <button></button>
</div>

Answer 1

许多方式： 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>

Answer 2

您可以在div中找到所有按钮并获取其长度

$(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>

Answer 3

纯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>

或所有孩子：

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

console.log(result)

<div id='maindiv'> 
  <button></button> <button></button> <button></button> <button></button> <button></button> 
</div>

Answer 4

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