jQuery each 에 대해 알아보자. 제이쿼리 반복문 jQuery for while
이번 포스팅은 jQuery 의 each function에 대해 알아보도록 하겠습니다.
each 는 여타 다른 언어들의 for, while 문과 동일한 기능을 합니다.
each는 실무에서 가장 많이 사용되는 jQuery function 중의 하나이므로
사용법을 확실하게 익혀두도록 합시다.
each 문의 사용방법에는 구분이 필요합니다.
DOM의 반복과 Array, Object의 반복.
DOM의 반복은 $(selector).each(function() {} 의 형태로 사용되고
Array, Object의 반복은 $.each() 의 형태로 사용합니다.
DOM의 반복부터 알아보도록 하죠.
(예문은 jQuery API 활용 책을 참고 했습니다.)
[1. DOM 의 반복]
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17 |
<body>
<span>jQuery1</span>
<span>jQuery2</span>
<span>jQuery3</span>
<span>jQuery4</span>
<span>jQuery5</span>
</body>
<script>
$(document).ready(function(){
var result;
$("span").each(function(){
result += $(this).html() +"\n"
});
alert($.trim(result) == "" ? "empty!" : $.trim(result));
});
</script> |
cs |
[결과]
jQuery1
jQuery2
jQuery3
jQuery4
jQuery5
입니다.
$("span").each(function(){}); 을 통해서 document 내에 있는 span element를 모두 찾아 반복하게 되고
result 에는 this(<span>) 를 html 형식의 문자열로 담습니다. 그리고 그 결과를 출력하는 거죠.
cf) 예약어 this 는 $("span") 으로부터 리턴된 각각의 element를 의미한다.
각각 element에 해당되는 값도 구할 수 있습니다.
(index 는 0부터 시작)
|
1
2
3
4
5
6
7
8
9 |
<script>
$(document).ready(function(){
var result;
$("span").each(function(index, element){
result += (i+1)+"번째 Element : "+$(element).html() +"\n"
});
alert($.trim(result) == "" ? "empty!" : $.trim(result));
}):
</script> |
cs |
[결과]
1번째 Element : jQuery1
2번째 Element : jQuery2
3번째 Element : jQuery3
4번째 Element : jQuery4
5번째 Element : jQuery5
[2. Array, Object 의 반복]
그럼 Array, Object 의 반복을 알아보죠.
(예문은 jQuery API를 참고했습니다.)
[2-1. Array 반복]
|
1
2
3 |
$.each([ 1, 2 ], function( index, value ) {
alert( index + " : " + value );
}); |
cs |
[결과]
0 : 1 팝업 후
1 : 2 팝업
[2-2. Object 반복]
|
1
2
3
4
5
6
7
8 |
var obj = {
"name": "geon",
"job": "programmer"
};
$.each( obj, function( key, value ) {
alert( key + " : " + value );
}); |
cs |
[결과]
name : geon 팝업 후
job : programmer 팝업
[사용된 jQuery 정리]
trim()
문자열의 시작 부분과 끝 부분에서 공백을 제거합니다.
html()
처음으로 일치하는 element의 내용을 HTML 형식의 문자열로 리턴한다. 리턴되는 element의 같은 노드에 여러 element가 위치하는 경우 $("tagName").html()은 $($"tagName)[0]).html() 과 같다. XML Document에서는 사용할 수 없다.
'Programing > jQuery' 카테고리의 다른 글
| jqeury reset 초기화 버튼 이벤트 구현 (0) | 2014.04.17 |
|---|---|
| jQuery Selector 셀렉터 사용법 (1) | 2014.04.17 |
| jQuery 전체선택 해제 체크박스 이벤트 구현 방법 (0) | 2014.04.14 |
| $(document).ready() 와 웹페이지의 실행순서에 대해 알아보자. (0) | 2014.04.14 |
| jQuery 란 무엇인가? & jQuery 다운로드 (0) | 2014.04.14 |
댓글