jQuery) DOM 요소 반복 처리 함수

jQuery로 여러 요소를 반복해서 처리하는 방법입니다.

• .each()
  jQuery의 each() 함수는 배열이나 DOM 요소와 같은 컬렉션을 반복(iterate)하면서, 각 요소에 대해 특정 작업을 수행할 수 있는 함수입니다. each() 함수는 배열이나 객체, DOM 요소에 대해 반복 작업을 수행할 때 유용하게 사용됩니다.

$(선택자).each(function(index, element) {
    // 반복할 때 실행할 코드
});

 

파라미터 설명

• function(index, element): 반복문에서 실행될 함수로, 각 반복마다 index와 element 값이 전달됩니다.
  • index: 현재 반복 중인 요소의 인덱스입니다. 0부터 시작하는 정수 값으로, 현재 요소가 컬렉션에서 몇 번째 요소인지를 나타냅니다.
  • element: 현재 반복 중인 요소 자체입니다. 이 값은 실제 DOM 요소이며, $(this)와 동일한 값을 가집니다. 즉, 현재 선택된 요소를 나타냅니다.

each() 함수 동작 방식

1. each()는 주어진 컬렉션(배열, DOM 요소)에 대해 하나씩 반복하면서 함수를 실행합니다.
2. 각 반복에서 인덱스와 요소를 전달받아, 특정 작업을 수행합니다.

배열을 반복하는 예시

배열을 순회하면서 각 요소에 접근할 수 있습니다.

var fruits = ["사과", "배", "포도", "복숭아"];

$.each(fruits, function(index, value) {
    console.log("인덱스: " + index + ", 값: " + value);
});

 

인덱스: 0, 값: 사과
인덱스: 1, 값: 배
인덱스: 2, 값: 포도
인덱스: 3, 값: 복숭아

• fruits 배열을 each()로 반복하면서, index와 value를 콘솔에 출력합니다.
• index는 배열의 인덱스(0, 1, 2, ...)이고, value는 해당 인덱스의 값입니다.

DOM 요소를 반복하는 예시

each()를 사용하여 여러 개의 DOM 요소를 반복할 수도 있습니다. 예를 들어, 페이지에서 여러 개의 <li> 요소를 순차적으로 처리할 수 있습니다.

$('li').each(function(index) {
    $(this).text('항목 ' + (index + 1));  // 각 <li>의 텍스트를 '항목 1', '항목 2'로 변경
});

• $('li')로 모든 <li> 요소를 선택하고, each()를 사용하여 각 <li>에 대해 index 값을 기반으로 텍스트를 변경합니다.
• **$(this)**는 현재 반복 중인 <li> 요소를 나타냅니다.

DOM 요소와 this 사용

each() 안에서 this는 현재 반복 중인 DOM 요소를 가리킵니다. $(this)를 사용하여 jQuery 객체로 래핑하면, 해당 요소를 jQuery 메서드를 통해 쉽게 조작할 수 있습니다.

$('.item').each(function() {
    var currentText = $(this).text();  // 현재 요소의 텍스트를 가져오기
    $(this).text(currentText.toUpperCase());  // 텍스트를 대문자로 변환하여 설정
});

• $(this): 현재 반복 중인 .item 클래스의 요소를 선택합니다.
• currentText.toUpperCase(): 텍스트를 대문자로 변환합니다.

배열이나 객체 외에도 사용 가능

each()는 배열뿐만 아니라 객체에도 사용할 수 있습니다. 객체의 키와 값에 대해서 반복할 수 있습니다.

var person = {
    name: "홍길동",
    age: 30,
    job: "개발자"
};

$.each(person, function(key, value) {
    console.log(key + ": " + value);
});

name: 홍길동
age: 30
job: 개발자

• 객체의 **key**와 **value**에 대해 반복하며, 해당 값을 출력합니다.

반복 종료 및 return false

each() 함수 안에서 return false를 사용하면 반복이 중단됩니다. 이는 break와 유사하게 작동합니다.

$('li').each(function(index) {
    if (index === 3) {
        return false;  // 3번째 항목에서 반복을 중단합니다.
    }
    $(this).css('color', 'blue');
});

• **return false**를 사용하면, 조건에 맞을 때 반복을 중단하고, 더 이상 다음 요소로 진행되지 않습니다.

this와 $(this)의 차이점

• **this**는 DOM 요소를 나타냅니다.
• **$(this)**는 jQuery 객체로 변환된 DOM 요소를 나타냅니다. 이때부터 jQuery 메서드를 사용하여 해당 요소를 조작할 수 있습니다.

예를 들어, this로는 text() 메서드를 직접 사용할 수 없고, $(this)로 래핑하여 text() 메서드를 사용할 수 있습니다.

$('li').each(function() {
    // 오류 발생: 'this'는 DOM 요소이기 때문에 jQuery 메서드를 직접 사용할 수 없음
    // console.log(this.text());

    // 올바른 방법: $(this)로 DOM 요소를 jQuery 객체로 래핑하여 사용
    console.log($(this).text());
});

정리

• **each()**는 배열, 객체, 또는 DOM 요소 컬렉션을 반복하면서 각 요소에 대해 특정 작업을 수행할 수 있는 함수입니다.
• **index**는 현재 요소의 위치, **element (또는 this)**는 현재 요소 자체를 나타냅니다.
• 반복 중 return false를 사용하여 반복을 중단할 수 있습니다.
• this는 현재 DOM 요소를 가리키고, $(this)는 jQuery 객체로 래핑된 현재 DOM 요소를 가리킵니다.

each() 함수는 반복 작업을 간단하게 할 수 있어, DOM 요소나 배열, 객체 등을 순차적으로 처리할 때 매우 유용합니다.