2011-09-13 3 views
44

이런 식으로 생각하면;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> 

어떻게 것 I, 사용 jQuery를 (또는 일반 JS, 그것은 짧은 있다면 -하지만 나는 그것을 의심)은 "항목"클래스로 div의 수를 계산? 이 예제에서 함수는 항목 클래스와 함께 5 개의 div가 있으므로 5를 반환해야합니다.

감사합니다.

+4

시도의 $ ("div.item") 길이 또는 $ ("div.item") 크기() –

+0

이 당신을 도움이 될 것입니다. [링크] [1] [1] : http://stackoverflow.com/questions/2727303/jquery-counting-elements-by-class-what-is-the-best-way-to-implement-this – Darvex

+0

size()는 (는) 더 이상 사용되지 않습니다. – lft93ryt

답변

94

당신이 사용해야 더 나은 성능을 위해 JQuery와 .length 재산

var numItems = $('.item').length; 
+7

.. .I 클래스 (.item 클래스의 다른 종류의 요소는 포함하지 않음)로 div 수를 계산하려면 $ ('div.item')이어야한다고 생각합니다. – jjmontes

+0

감사합니다, 이것이 내가 필요한 것입니다! 시간 제한이 끝나 자마자 당신의 대답을 받아 들일 것입니다! –

+2

@jjmontes 사실입니다. 물론 당신은 어떤 선택자를 사용할 수 있습니다 ..하지만 그것은 OP가 얻고 자하는 구체적인 방법에 달려 있습니다. 예를 들어'$ ('div.wrapper div.item')'이 더 가까울 것입니다. –

17

를 사용할 수 있습니다

var numItems = $('div.item').length; 

단지 DOM에서 div 요소를 찾습니다 빠르게 될 것입니다.

제안 : SIZE() 함수 정의 length 속성을 사용하고 그 결과를 돌려 보낸 size() 대신 length 속성을 사용한 것을는 처리 한 추가 단계를 의미한다.

+0

'.item' 대신에'div.item'을 사용할 때의 시간/성능의 차이가 무엇인지 알고 싶습니다. 물론 이것은 문서의 크기에 달려 있지만 일반적으로 나는 호기심을 가지고 있습니다. 큰 변화가 있는지 알기. – haakym

2

난 그냥이 그것은 클래스 이름이 문서에서 발생 횟수를 경고 JQuery와 크기 기능 http://api.jquery.com/size/

function classCount(name){ 
    alert($('.'+name).size()) 
} 

를 사용하여 기능을 JS 만들었습니다.

8

jQuery.children 속성을 사용할 수 있습니다.

var numItems = $('.wrapper').children('div').length; 

자세한 내용은 http://api.jquery.com/

1

그리고 사람이 관심을 가질만한 경우 일반 JS 대답을 참조하십시오;

var count = document.getElementByClassName("item"); 

환호. .

관련 문제