Total Fix!

[.length] 카테고리 개수 구하기 (jQuery)

: WebProgram/jQuery [JS]

Posted by Total Fix! on 2015. 8. 18. 19:04

jQuery(제이쿼리)에서 개체에 대한 요소의 개수를 구하는 함수는 .length 입니다.

따라서 class에 대한 개수를 구하는 식은 아래와 같습니다.

$('.class').length

위의 식을 기준으로 카테고리를 만들고 카테고리의 항목 개수와 전체 개수를 구하는 식을 알아 보겠습니다.

예는 아래와 같습니다.

<li class="open">카테고리 (<int></int>)

<ul>

<li>A (<intA></intA>)

<ul>

</ul>

</li>

<li>B (<intB></intB>)

<ul>

</ul>

</li>

<li>C (<intC></intC>)

<ul>

</ul>

</li>

<li>D (<intD></intD>)

<ul>

</ul>

</li>

</ul>

</li>

</ul>

위에서 보듯이 전체 메뉴 목록에 Class마다 공통으로 cate를 주고 각가의 항목마다 구분되는 A~Z 까지 항목을 2차원으로 표시하였습니다.

위의 결과를 브라우저로 확인하면 아래와 같이 표현됩니다.

위에서 개수를 구하는 식이 $('.class').length라고 했으니 카테고리 A의 개수를 구하는 식은 $('.A').length가 되겠습니다.

결과는 4가 나올 것입니다. 이를 <intA></intA>에 표시해 주려면 $('intA').append($('.A').length); 입니다.

그런데 문제는 $('intA').append($('.A').length); $('intB').append($('.B').length); ... $('intZ').append($('.Z').length); 이렇게 모든 카테고리에 대하여 반복적인 작업을 수행하는 것은 낭비이고 귀찮기도 합니다.

따라서 루프를 시키도록 하겠습니다.

jQuery(제이쿼리)에서 루프문은 each 입니다.

var alphabet = "ABCDEFGHIJKLMNOPQRSTUVWXYZ".split("");

// alphabet[no]에 A~Z 까지 분리해서 저장 할 것입니다. no는 0부터 시작한다.

// alphabet[0]=A가 저장되고 alphabet[1]=B가 저장된다.

$.each(alphabet, function(no) { $('int'+ alphabet[no]).append($('.'+alphabet[no]).length);});

//alphabet 배열만큼 계속 루프시킨다.

//$('intA').append($('.A').length);부터 $('intZ').append($('.Z').length); 까지 계산하고 기록한다.

위와 같이 적용하면 결과는 아래와 같이 표현 될 것입니다.

이제 남은 것은 카테고리 전체의 개수를 구하는 것입니다.

위의 기본 예시에서 공통으로 주어진 Class 명이 cate 였으므로 cate의 개수면 세면 전체 카테고리의 개수가 나올 것입니다.

그리고 <int></int>에 기룩 하면되겠습니다.

따라서 함수는 $('int').append($('.cate').length);가 됩니다.

따라서 아래와 같이 마무리 하면 전체 카테고리의 개수와 각각의 카테고리 항목의 개수를 표시해주는 HTML이 완성이 됩니다.

<li class="open">카테고리 (<int></int>)

<ul>

<li>A (<intA></intA>)

<ul>

</ul>

</li>

<li>B (<intB></intB>)

<ul>

</ul>

</li>

<li>C (<intC></intC>)

<ul>

</ul>

</li>

<li>D (<intD></intD>)

<ul>

</ul>

</li>

</ul>

</li>

</ul>

var alphabet = "ABCDEFGHIJKLMNOPQRSTUVWXYZ".split("");

$.each(alphabet, function(letter) { $('int'+ alphabet[letter]).append($('.'+alphabet[letter]).length);});

$('int').append($('.cate').length);

</script>

결과는 아래와 같습니다. (아래는 실제 HTML와 Javascript를 이용하여 계산되는 모습입니다.)

※ 태그 <INT></INT>는 임의로 제가 만든 태그입니다. <INT></INT> 대신 <DIV CLASS=INT></DIV>로 하고 $('.int').append($('.cate').length);로 적용하셔도 됩니다.

조금 설명이 서툰감이 있습니다만 직접 해보시고 결과를 보시는게 100번 이해하기 쉬울 수가 있습니다.

저작자표시 비영리 동일조건

'WebProgram > jQuery [JS]' 카테고리의 다른 글

[ jQuery ] 더블 클릭으로 소스코드 전체 선택하기 (0)	2016.03.30
[jQuery] class 제어하기 (1)	2015.09.26
Jquery Mobile API 오프라인 크롬 브라우저에서 확인 하는 방법 (0)	2015.09.18
[JQuery / Javascript] 자바스크립트와 제이쿼리를 이용하여 나이를 구하는 방법 (0)	2015.09.02
[Javascript] 자바스크립트에서 서버시간 구하기 [Date(),XMLHttpRequest] (1)	2015.09.01
[jQuery (제이쿼리)] jQuery (제이쿼리)란 무엇인가? (0)	2015.08.17

Total Fix!

Total Fix!

Category

[.length] 카테고리 개수 구하기 (jQuery)

'WebProgram > jQuery [JS]' 카테고리의 다른 글

티스토리툴바