반응형
jQuery는 특정 클래스의 div 수를 계산합니까?
이와 같은 것을 고려하십시오.
<div class="wrapper">
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
</div>
jQuery (또는 일반 JS, 짧지 만 의심스러운 경우)를 사용하여 "item"클래스가있는 div 수를 어떻게 계산합니까? 이 예제에서는 항목 클래스에 5 개의 div가 있으므로 함수는 5를 반환해야합니다.
감사!
jquery .length 속성을 사용할 수 있습니다.
var numItems = $('.item').length;
더 나은 성능을 위해 다음을 사용해야합니다.
var numItems = $('div.item').length;
div요소 만 찾고 DOM빠르기 때문에.
제안 : 속성 size()대신 사용 하는 것은 함수 정의에서 속성을 사용 하고 결과를 반환 하므로 length처리에 한 단계가 더 추가됨을 의미 합니다.SIZE()length
jQuery.children 속성을 사용할 수 있습니다.
var numItems = $('.wrapper').children('div').length;
자세한 내용은 http://api.jquery.com/을 참조하십시오.
방금 jQuery 크기 함수 http://api.jquery.com/size/를 사용하여이 js 함수를 만들었습니다.
function classCount(name){
alert($('.'+name).size())
}
문서에서 클래스 이름이 발생한 횟수를 경고합니다.
그리고 누구나 관심이 있다면 일반 js 대답에 대해;
var count = document.getElementsByClassName("item");
건배.
참조 : https://www.w3schools.com/jsref/met_document_getelementsbyclassname.asp
<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
.test {
background: #ff4040;
color: #fff;
display: block;
font-size: 15px;
}
</style>
</head>
<body>
<div class="test"> one </div>
<div class="test"> two </div>
<div class="test"> three </div>
<div class="test"> four </div>
<div class="test"> five </div>
<div class="test"> six </div>
<div class="test"> seven </div>
<div class="test"> eight </div>
<div class="test"> nine </div>
<div class="test"> ten </div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function () {
//get total length by class
var numItems = $('.test').length;
//get last three count
var numItems3=numItems-3;
var i = 0;
$('.test').each(function(){
i++;
if(i>numItems3)
{
$(this).attr("class","");
}
})
});
</script>
</body>
</html>
참조 URL : https://stackoverflow.com/questions/7404544/jquery-count-number-of-divs-with-a-certain-class
반응형
'Programing' 카테고리의 다른 글
| 파일 업로드 크기 제한 (HTML 입력) (0) | 2021.01.10 |
|---|---|
| Android 용 Google지도 API, MD5 대신 SHA1 인증서 받기 (0) | 2021.01.10 |
| NodeJS에서 Http 요청을 통해 json 가져 오기 (0) | 2021.01.10 |
| C #에서 사용자의 공용 IP 주소를 얻는 방법 (0) | 2021.01.10 |
| 격리 범위를 사용하여 내부 지시문에서 $ watch ngModel (0) | 2021.01.09 |