jQuery에서 each 메서드 사용하기

jQuery를 사용하여 얻은 요소 그룹이 있을 때, 변경 사항은 모든 요소에 동시에만 적용할 수 있습니다.

예를 들어, 찾은 모든 단락의 텍스트를 변경하려는 경우, 각각 다르게 만들 수는 없습니다.

이런 경우 특별한 메서드인 each가 도움이 되는데, 이 메서드는 jQuery 집합의 모든 요소에 어떤 함수를 적용할 수 있게 해줍니다. 이 함수 내부에서 우리는 요소들을 구분하고 각각에 대해 다르게 처리할 수 있습니다.

본질적으로 each는 찾은 모든 요소를 순회할 수 있는 루프입니다. 현재 루프가 진행 중인 요소에 대한 참조는 this에 저장됩니다.

우리는 이전에 했던 것처럼 순수 JavaScript에서 이 this를 간단히 사용할 수 있습니다, 예를 들어 this.innerHTML와 같이 해서 요소의 내부 콘텐츠를 출력할 수 있습니다. 하지만 this를 jQuery 달러로 감싸는 것이 더 좋습니다, $(this)와 같이요 - 이렇게 하면 모든 jQuery 메서드와 체인을 적용할 수 있습니다.

다음 HTML 코드를 살펴보겠습니다:

<p class="www">text</p>
<p class="www">text</p>
<p class="www">text</p>
<p>text</p>

이 예제에서 우리는 클래스가 www인 모든 요소를 가져와 그 내용을 화면에 출력해야 합니다. 방법은 다음과 같습니다: $('.www')를 사용하여 필요한 요소를 얻은 다음, each(test)를 사용하여 얻은 각 요소에 test 함수를 적용합니다. 이 함수는 먼저 첫 번째 단락에, 그 다음 두 번째, 세 번째 등에 적용됩니다.

함수 내부에서 this는 함수 test가 적용되는 요소를 가리킵니다 - 처음에는 첫 번째 요소, 그 다음에는 두 번째 요소, 이런 식으로요. $(this)와 같은 구문을 사용하면 일반 JavaScript의 this 대신 jQuery 요소를 얻고 여기에 html 메서드를 적용하여 요소의 텍스트를 얻을 수 있습니다. 그런 다음 화면에 출력됩니다:

/*
	함수 이름 test는 따옴표와 () 없이 씁니다,
	결과가 아니라 코드 자체가 필요하기 때문입니다:
*/

$('.www').each(test);

function test() {
	alert($(this).html());
}

이 작업을 해결하기 위해 익명 함수를 사용할 수도 있습니다 - 이 방법이 가장 일반적입니다:

$('.www').each(function() {
	alert($(this).html());
});

또한 each 메서드에 매개변수가 있는 콜백 함수를 전달할 수도 있습니다.

다음 예제에서 페이지의 모든 li 끝에 순서 번호를 추가해 보겠습니다. 이제 우리의 익명 함수에 요소의 인덱스와 요소 자체를 전달할 것입니다:

$('li').each(function (index, elem) {
	$(elem).append(index);
});

이제 elem 대신 this를 사용해 보겠습니다:

$('li').each(function (index) {
	$(this).append(index);
});

모든 li의 내용을 해당 순서 번호로 변경하세요.