How can I count the number of elements with same class?

后端未结

关注

 6  585

I have a main div in my page with a specific id. Now some input elements of the same class are present in this div. So how can I count the number o

相关标签:

6条回答

爱一瞬间的悲伤

2020-11-29 03:39
I'd like to write explicitly two methods which allow accomplishing this in pure JavaScript:
```
document.getElementsByClassName('realClasssName').length
```
Note 1: Argument of this method needs a string with the real class name, without the dot at the begin of this string.
```
document.querySelectorAll('.realClasssName').length
```
Note 2: Argument of this method needs a string with the real class name but with the dot at the begin of this string.

Note 3: This method works also with any other CSS selectors, not only with class selector. So it's more universal.

I also write one method, but using two name conventions to solve this problem using jQuery:
```
jQuery('.realClasssName').length
```
or
```
$('.realClasssName').length
```
Note 4: Here we also have to remember about the dot, before the class name, and we can also use other CSS selectors.
0 讨论(0)
发布评论:

提交评论
- 加载中...
耶瑟儿～

2020-11-29 03:40
With jQuery you can use
```
$('#main-div .specific-class').length
```
otherwise in VanillaJS (from IE8 included) you may use
```
document.querySelectorAll('#main-div .specific-class').length;
```
0 讨论(0)
发布评论:

提交评论
- 加载中...
南旧

2020-11-29 03:43

document.getElementsByClassName("classstringhere").length

The document.getElementsByClassName("classstringhere") method returns an array of all the elements with that class name, so .length gives you the amount of them.

0 讨论(0)
发布评论:

提交评论
- 加载中...
眼角桃花

2020-11-29 03:46
```
$('#maindivid').find('input .inputclass').length
```
0 讨论(0)
发布评论:

提交评论
- 加载中...

花落未央

2020-11-29 03:49

You can get to the parent node and then query all the nodes with the class that is being searched. then we get the size

var parent = document.getElementById("parentId");
var nodesSameClass = parent.getElementsByClassName("test");
console.log(nodesSameClass.length);

<div id="parentId">
  <p class="prueba">hello word1</p>
  <p class="test">hello word2</p>
  <p class="test">hello word3</p>
  <p class="test">hello word4</p>
</div>

0 讨论(0)

北荒

2020-11-29 03:51

Simplest example:

document.getElementById("demo").innerHTML = "count: " + document.querySelectorAll('.test').length;

<html>
    <body>
    
    <p id="demo"></p>
    <ul>
      <li class="test">Coffee</li>
      <li class="test">Milk</li>
      <li class="test">Soda</li>
    </ul>

 </body> 
 </html>

0 讨论(0)