jquery each 예제

다음 예제는 웹 페이지의 모든 div를 선택하고 각 div의 인덱스와 ID를 출력합니다. 가능한 출력은 „div0:header”, „div1:body”, „div2:footer”입니다. 이 버전은 유틸리티 함수가 아닌 jQuery의 각() 함수를 사용합니다. 개체를 컬렉션으로 사용하는 경우 콜백은 의도적이든 실수로든 실행 컨텍스트가 변경될 수 있습니다. 이 키워드를 일관되게 사용하면 우리 자신 또는 다른 개발자가 코드를 읽는 데 혼란을 줄 수 있습니다. 실행 컨텍스트가 동일하게 유지되더라도 두 번째 매개 변수를 명명된 매개 변수로 사용하는 것이 더 읽기 쉽습니다. 예를 들어 jQuery.each() 함수가 jQuery 개체와 함께 어떻게 도움이 되는지 살펴보겠습니다. 첫 번째 예제에서는 페이지의 모든 요소를 선택하고 href 특성을 출력합니다. 인덱스와 값을 포함할 필요는 없습니다. 이러한 매개 변수는 현재 반복중인 DOM 요소를 결정하는 데 도움이 되는 매개 변수일 뿐입니다. 또한 이 시나리오에서는 각 메서드를 보다 편리하게 사용할 수도 있습니다. jQuery 각 함수는 데이터를 통해 루프하는 데 사용되며 다른 언어의 foreach 루프와 유사하다는 것을 가장 쉽게 생각할 수 있습니다.

따라서 동일한 선택기에서 여러 DOM 개체를 반복하는 데 사용할 수 있습니다. 예를 들어 페이지의 모든 링크에 target=”_blank”를 추가하려는 경우 모든 링크를 선택하고 각 링크를 반복하여 target=”_blank”를 추가합니다. jQuery의 각() 함수는 대상 jQuery 개체의 각 요소를 반복하는 데 사용됩니다. jQuery에서 실제로 경험하지 않은 경우 jQuery 개체가 하나 이상의 DOM 요소를 포함하고 모든 jQuery 함수를 노출하는 개체임을 상기시켜줍니다. 다중 요소 DOM 조작, 임의의 배열 반복 및 개체 속성에 매우 유용합니다. 이 함수 외에도 jQuery는 이전에 DOM 요소를 선택하거나 만들지 않고도 호출할 수 있는 동일한 이름의 도우미 함수를 제공합니다. 다음 섹션에서 자세히 알아보겠습니다. 이 예제에서는 빨간색=#f00, 녹색=#0f0, 파란색=#00f 출력합니다. .each()는 jQuery 컬렉션에서 직접 사용됩니다. 컬렉션에서 일치하는 각 요소를 반복해서 해당 개체에 대한 콜백을 수행합니다. 컬렉션 내의 현재 요소의 인덱스는 콜백에 대한 인수로 전달됩니다. 이 경우 DOM 요소도 전달되지만 콜백은 현재 일치하는 요소의 컨텍스트 내에서 발생하므로 이 키워드는 다른 jQuery 콜백에서 예상한 대로 현재 요소를 가리킵니다.

콜백 함수를 false로 반환하여 특정 반복에서 $.each() 루프를 끊을 수 있습니다. false가 아닌 반환은 for 루프의 continue 문과 동일합니다. 즉시 다음 반복으로 건너뜁니다. 다음 예제에서는 사용자가 ID 5demo가 있는 요소를 클릭하면 모든 목록 항목이 즉시 주황색으로 설정됩니다. 인덱스 종속 지연 후 (0, 200, 400, … 밀리초)를 페이드 아웃합니다. $.each()는 본질적으로 전통적인 용 또는 for-in 루프의 드롭인 대체품입니다. 주어진: jQuery 개체의 DOM 요소는 jQuery each() 내에서 사용될 때 다시 래핑되어야 합니다. 그 이유는 jQuery가 실제로 DOM 요소 배열을 둘러싼 래퍼일 뿐이기 때문입니다. jQuery each()를 사용하여 이 배열은 일반 배열과 동일한 방식으로 반복됩니다. 따라서 래핑된 요소를 상자에서 꺼내지 않습니다.

참고: jQuery 개체를 반환하는 대부분의 jQuery 메서드는 암시적 반복이라고 하는 프로세스인 jQuery 컬렉션의 요소 집합을 반복합니다. 이 경우 .each() 메서드를 사용하여 명시적으로 반복할 필요가 없는 경우가 많습니다. 많은 jQuery 메서드는 전체 컬렉션을 암시적으로 반복하여 일치하는 각 요소에 해당 동작을 적용합니다. 예를 들어 .each() 메서드는 DOM 루핑 구문이 간결하고 오류가 발생하기 쉽도록 설계되었습니다. 호출하면 jQuery 개체의 일부인 DOM 요소를 반복해서 합니다.