패키지

jQuery - each() 메서드 본문

Client-Side/XML, Ajax, jQuery

jQuery - each() 메서드

업단업업 2017. 12. 11. 20:42


jQuery - each() 메서드


jQuery를 사용해 배열을 관리하고자 할 때 each() 메서드를 사용할 수 있다.

each() 메서드는 매개 변수로 받은 것을 사용해 for in 반복문과 같이 배열이나 객체의 요소를 검사할 수 있는 메서드이다.


each()메서드는 다음과 같은 두 가지 타입이 있다.

1
2
3
4
5
6
7
8
9
// jQuery 유틸리티 메서드
$.each(object, function(index, item){                               
 
});
 
// jQuery 일반 메서드
$(selecter).each(function(index, item){
 
});
cs


$.each()

$.each()메서드는 object와 배열 모두에서 사용할 수 있는 일반적인 반복 함수.

length 속성을 갖는 배열과 유사 배열 객체들을 index를 기준으로 반복할 수 있다.


$.each(arr, function(index, item))

첫 번째 매개변수 - 배열/객체

두 번째 매개변수 - 콜백함수를 받음(콜백함수의 인자로는 인덱스와 값을 인자로 갖음)

소스

1
2
3
4
5
6
7
8
9
10
11
12
<script>
    var arr = [
        {title : '다음', url : 'www.daum.net'},
        {title : '구글', url : 'www.google.net'}
    ];
    
    $.each(arr, function(index, item){
        var result = '';
        result += index + ' : ' + item.title + ' , ' + item.url;
        console.log(result);
    });
</script>

cs

첫 번째 매개변수 : arr 위의 배열

두 번째 매개변수 : 콜백함수, 콜백함수의 매개변수 중

- index : 배열의 인덱스 또는 객체의 키를 의미

- item : 해당 인덱스나 키가 가진 값.


결과값

1
2
0 : 다음 , www.daum.net
1 : 구글 , www.google.net
cs


배열대신 객체를 전달하는 경우

1
2
3
4
5
6
7
8
9
10
11
12
<script>
    var obj = {
        daum : 'http://daum.net',
        naver : 'http://naver.com'
    };
 
    $.each(obj, function(index, item) {
        var result = '';
        result += index + ' : ' + item;
        console.log(result);
    });
</script>
cs

index : 객체의 key(property)를 가리키고

item : 키의 값을 가져옴.


결과값

1
2
daum : http://daum.net
naver : http://naver.com
cs



$().each()

아래의 스크립트를 실행하면 마크업 부분의 ul class내의 li 엘리먼트에 클래스가 추가된 것을 확인할 수 있다.

제이쿼리에 선택자를 넘기면,

해당 선택자를 자바스크립트의 반복문과 같이 사용한다.


소스

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<body>
 
<h1>jQuery .each Test</h1>
    <ul class="list">
        <li>Lorem ipsum dolor sit amet.</li>
        <li>Lorem ior sit amet.</li>
        <li>Lorem ipsum</li>
    </ul>
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> 
 
<script>
 
    $(".list li").each(function(index, item){
        $(item).addClass('li_0'+ index);
        //$(this).addClass('li_0'+ index);
//item과 this는 같아서 일반적으로 this를 많이 사용한다고 한다.
    });
 

cs


결과 화면



* 마크업 : HTML을 사용해서 문서 내용을 구성하고 의미를 부여한다. 쉽게 말하면 HTML(Hyper Text Markup Language)처럼 마크로 시작해서 마크로 끝나는 언어.<p></p>이런 것


참고 : http://webclub.tistory.com/455


저작자표시

'Client-Side > XML, Ajax, jQuery' 카테고리의 다른 글

jQuery 래퍼(wrapper), 선택자(selector)기본  (0) 2017.12.05
jQuery란, jQuery 플러그인 삽입하기  (0) 2017.12.01
공유하기 링크
'Client-Side/XML, Ajax, jQuery' Related Articles more
Comments