TechCodeview

그만큼 각() jQuery의 메소드는 일치하는 모든 요소에 대해 실행되는 함수를 지정합니다. JQuery에서 널리 사용되는 탐색 방법 중 하나입니다. 이 방법을 사용하면 jQuery 객체의 DOM 요소를 반복할 수 있고 일치하는 모든 요소에 대해 함수를 실행할 수 있습니다.

그만큼 각() 매개변수를 받아들입니다 함수(색인,요소) 이는 선택한 각 요소에 대해 실행되는 콜백 함수입니다. 이 함수에는 선택적으로 인덱스와 요소라는 두 개의 매개변수가 필요합니다. 따라서 콜백 함수를 각각() 메서드에 전달해야 합니다.

우리도 돌아올 수 있어요 거짓 콜백 함수에서 루프를 조기에 중지합니다.

통사론

 $(selector).each(function(index, element)) 

매개변수 값

사용된 매개변수 값 각() 메소드는 다음과 같이 정의됩니다.

함수(색인,요소): 필수 매개변수입니다. 선택한 모든 요소에 대해 실행되는 콜백 함수입니다. 여기에는 다음과 같이 정의된 두 개의 매개변수 값이 있습니다.

제이쿼리가 뭐야?

색인:선택자의 인덱스 위치를 지정하는 정수값입니다.요소:현재 요소입니다. 이 키워드를 사용하여 현재 일치하는 요소를 참조할 수 있습니다.

이해를 돕기 위해 몇 가지 그림을 살펴보겠습니다. 각() 방법을 명확하게.

실시예 1

이 예에서는 각() 버튼을 클릭하면 메소드가 트리거됩니다. 우리는 이 방법을 에 적용하고 있습니다. 저것 강요. 따라서 이 방법은 각 항목에 대해 반복됩니다. 저것 요소. 선택한 각 항목에 대해 기능이 실행됩니다. 저것 해당 텍스트를 표시합니다. 저것 경고 상자를 사용하는 요소.

여기서는 콜백 함수의 매개변수 값을 사용하지 않습니다.

 jQuery each() method <h2> Welcome to the javaTpoint.com </h2> <ul> <li> First element </li> <li> Second element </li> <li> Third element </li> <li> Fourth element </li> </ul> <p> Click the following button to see the list of <b> li </b> elements. </p> Click me function fun(){ $(document).ready(function(){ $(&apos;li&apos;).each(function(){ alert($(this).text()) }); }); } 

산출

최초의 노트북

위 코드를 실행한 후 출력은 다음과 같습니다.

버튼을 클릭하면 아래와 같이 경고가 표시됩니다.

마찬가지로 4개의 경고 상자가 표시됩니다. 저것 강요.

실시예2

이 예에서는 콜백 함수의 매개변수 값을 사용하고 있습니다. 색인 그리고 요소 .

우리는 각() 방법 저것 강요. 따라서 이 메서드는 인덱스부터 시작하여 li 요소를 반복합니다. 0 . 선택한 각 항목에 대해 실행됩니다. 저것 요소를 변경하고 해당 요소의 배경색을 변경합니다.

함수가 반환되면 반복이 중지됩니다. 거짓 . 여기 6개가 있어요 저것 요소에 도달하면 함수가 중지됩니다. 아이디 = 'i4' . 네 번째 요소이지만 인덱스는 다음에서 시작됩니다. 0 이므로 요소의 위치는 다음과 같습니다. 삼 .

 jQuery each() method body{ text-align: center; } ul{ list-style-type: none; float: left; } li { width: 40px; height: 40px; margin: 5px; padding: 5px; font-size: 20px; float: left; border: 2px solid blue; } button{ font-size: 20px; } <h2> Welcome to the javaTpoint.com </h2> <ul> <li> 1 </li> <li> 2 </li> <li> 3 </li> <li id="i4"> Stop </li> <li> 5 </li> <li> 6 </li> </ul> Click me function fun() { $(document).ready(function(){ $(&apos;li&apos;).each(function(index, element) { $(element).css(&apos;background&apos;, &apos;lightgreen&apos;); if ($(this).is(&apos;#i4&apos;)) { $(&apos;p&apos;).text(&apos;Index begins with 0. So, the function stopped at position: &apos; + index ).css(&apos;fontSize&apos;, &apos;20px&apos;); return false; } }); }); } 

산출

위의 코드를 실행하고 주어진 버튼을 클릭하면 출력은 다음과 같습니다.