클래스가 같은 원소의 개수는 어떻게 셀 수 있습니까?
내 페이지에 특정한 것이 있는 메인 디브가 있습니다.id. 여기에 같은 클래스의 입력 요소가 있습니다.div. 그럼 이 안에 있는 같은 종류의 원소들의 개수를 어떻게 셀 수 있을까요?divjQuery로?
와 함께jQuery사용가능
$('#main-div .specific-class').length
그렇지 않으면 VanillaJS에서 (from.IE8포함) 사용할 수 있습니다.
document.querySelectorAll('#main-div .specific-class').length;
document.getElementsByClassName("classstringhere").length
그document.getElementsByClassName("classstringhere")method는 해당 클래스 이름을 가진 모든 요소의 배열을 반환하므로,.length그들의 양을 알려줍니다.
상위 노드로 이동한 다음 검색 중인 클래스가 있는 모든 노드를 쿼리할 수 있습니다.그러면 우리는 사이즈를 얻습니다.
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>$('#maindivid').find('input .inputclass').length
이를 순수 자바스크립트로 수행할 수 있는 두 가지 방법을 명시적으로 작성하고자 합니다.
document.getElementsByClassName('realClasssName').length
참고 1: 이 메서드의 인수에는 이 문자열의 맨 앞에 점이 없는 실제 클래스 이름을 가진 문자열이 필요합니다.
document.querySelectorAll('.realClasssName').length
주 2: 이 메서드의 인수에는 실제 클래스 이름을 가진 문자열이 필요하지만 이 문자열의 맨 앞에 점이 있습니다.
참고 3: 이 방법은 클래스 선택기뿐만 아니라 다른 CSS 선택기에서도 작동합니다.그래서 더 보편적입니다.
저도 하나의 방법을 쓰지만, jQuery를 사용하여 이 문제를 해결하기 위해 두 개의 이름 표기법을 사용합니다.
jQuery('.realClasssName').length
아니면
$('.realClasssName').length
참고 4: 여기서는 클래스 이름 앞에 있는 점에 대해서도 기억해야 하며 다른 CSS 셀렉터도 사용할 수 있습니다.
가장 간단한 예:
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>언급URL : https://stackoverflow.com/questions/9681601/how-can-i-count-the-number-of-elements-with-same-class
'programing' 카테고리의 다른 글
| 오라클 - dblink 위에 커밋? (0) | 2023.11.02 |
|---|---|
| 하위 쿼리 결과에서 ID 삭제 (0) | 2023.11.02 |
| 앱이 독립 실행형 상태인 경우 PWA 앱에서 Facebook 로그인이 작동하지 않음 (0) | 2023.11.02 |
| node.js 앱에 대한 코딩 스타일 가이드? (0) | 2023.11.02 |
| 텍스트를 태그로 래핑 (0) | 2023.11.02 |