jquery each 예제

값이 $.each()의 콜백에 편리하게 전달되기 때문에 arr[인덱스]에 액세스할 필요가 없습니다. 각 숫자를 단어와 숫자로 표시하는 배열을 통해 계속하여 선택기의 각() 메서드 대신 각() 도우미를 사용합니다. 다음 예제는 웹 페이지의 모든 div를 선택하고 각 div의 인덱스와 ID를 출력합니다. 가능한 출력은 „div0:header”, „div1:body”, „div2:footer”입니다. 이 버전은 유틸리티 함수가 아닌 jQuery의 각() 함수를 사용합니다. 반면에 일부 메서드는 컬렉션을 반복하지 않습니다. .each()는 새 값을 설정하기 전에 요소에서 정보를 얻어야 하는 경우에 필요합니다. 다음 예제에서는 사용자가 ID 5demo가 있는 요소를 클릭하면 모든 목록 항목이 즉시 주황색으로 설정됩니다. 인덱스 종속 지연 후 (0, 200, 400, … 밀리초)를 페이드 아웃합니다. 다음은 .each()를 필요로 하는 메서드 목록입니다: 위의 예제에서는 function() 매개 변수 내에서 i를 확인할 수 있습니다. 이 변수는 페이지의 링크가 10개인 것을 볼 수 있도록 각 변수의 현재 인덱스로 채워집니다. 위의 예제에서는 DOM 요소를 선택하고 루프를 통해 루프하는 방법을 보았지만 이를 사용하여 데이터 배열을 반복하고 인덱스와 배열 내부의 위치 값을 모두 얻을 수도 있습니다.

의도적이든 의도하지 않든 실행 컨텍스트가 변경될 수 있습니다. 이 키워드를 일관되게 사용하면 우리 자신 또는 다른 개발자가 코드를 읽는 데 혼란을 줄 수 있습니다. 실행 컨텍스트가 동일하게 유지되더라도 두 번째 매개 변수를 명명된 매개 변수로 사용하는 것이 더 읽기 쉽습니다. 예를 들어 jQuery의 각() 함수는 대상 jQuery 개체의 각 요소를 반복하는 데 사용됩니다. jQuery에서 실제로 경험하지 않은 경우 jQuery 개체가 하나 이상의 DOM 요소를 포함하고 모든 jQuery 함수를 노출하는 개체임을 상기시켜줍니다. 다중 요소 DOM 조작, 임의의 배열 반복 및 개체 속성에 매우 유용합니다. 이 함수 외에도 jQuery는 이전에 DOM 요소를 선택하거나 만들지 않고도 호출할 수 있는 동일한 이름의 도우미 함수를 제공합니다.