each()

<ul class="list">
    <li>Lorem ipsum dolor sit amet.</li>
    <li>Lorem ior sit amet.</li>
    <li>Lorem ipsum </li>
</ul>

ajax로 조회한 데이터를 반복문을 통해 입력해야 하는 경우 사용하기 좋은 메서드이다.

each메서드는 두가지 사용 방법이 있다.

// 첫번째
$.each(object, function(key, value){

});

// 두번째
$(selector).each(function(key, value){

})

첫번째

$.each() 메서드는 object 와 배열 모두에서 사용할 수 있는 일반적인 반복 함수입니다.
배열과 length 속성을 갖는 배열과 유사 배열 객체들을 index를 기준으로 반복할 수 있습니다.
첫 번째 매개변수로 배열이나 객체를 받습니다.
그리고 두번째 매개변수로 콜백함수를 받으며 콜백함수의 인자로는 인덱스와 값을 인자로 갖습니다.

// 객체을 선언
vard data = [
    { name : '귤', type : 'fruit'},
    { name : '호두', type : 'nuts'}
];

// $.each() 메서드의 첫번째 매겨변수로 위에서 선언한 배열은 전달
$.each(arr, function (index, data) {
    // 두 번째 매개변수로는 콜백함수인데 콜백함수의 매개변수 중
    // 첫 번째 index는 배열의 인덱스 또는 객체의 키를 의미하고
    // 두 번째 매개 변수 item은 해당 인덱스나 키가 가진 값을 의미합니다.

    var result = '';

    result += index +' : ' + data.name + '은(는) ' + data.nuts + '입니다.';

    console.log(result);

    // 0 : 귤은(는) fruit입니다.
    // 1 : 호두은(는) nuts입니다.

})

두번째

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

 

// 객체를 선언
var obj = {
    daum: 'http://daum.net',
    naver: 'http://naver.com'
};

// $.each() 메서드의 첫번째 매겨변수로 위에서 선언한 객체를 전달
$.each(obj, function (index, item) {

    // 객체를 전달받으면 index는 객체의 key(property)를 가리키고
    // item은 키의 값을 가져옵니다.

    var result = '';

    result += index + ' : ' + item;

    console.log(result);

    // daum : http://daum.net
    // naver : http://naver.com

})

 

실제 업무에서 활용할 수 있는 예제

<ul class="list">
    <li>Lorem ipsum dolor sit amet.</li>
    <li>Lorem ior sit amet.</li>
    <li>Lorem ipsum </li>
</ul>

 

//foreach처럼 사용한다

$('.list li').each(function (index, item) {
    // 인덱스는 말 그대로 인덱스
    // item 은 해당 선택자인 객체를 나타냅니다.
    $(item).addClass('li_0' + index);

    // item 과 this는 같아서 일반적으로 this를 많이 사용합니다.
    // $(this).addClass('li_0' + index);
});

---

실습하기

// 객체형 배열 생성
var data = [
    {key : 1 , value : 'a'},
    {key : 2 , value : 'b'},
    {key : 3 , value : 'c'},
    {key : 4 , value : 'd'},
    {key : 5 , value : 'e'},
];

// 페이지 로드시 실행
$(function(){
    $.each(data,function(index, data){
        console.log(data)
    });
});

실행결과

 

참조 : https://webclub.tistory.com/455