[#TIL] each() 에 대한 학습

Todo List 학습

반복문 기초 학습

each

each() 매서드 사용

• 배열 관리를 위함
• 배열이나 객체의 요소 검사

jQuery 객체 배열에는 검색된 여러 개의 요소(Element)가 저장되어 있음.
선택자에 의해 선택된 요소가 하나뿐이거나 없더라도 일단은 배열이다. 배열에 저장된 요소들을 각각에 대해 개별적인 처리를 하고 싶다면 배열을 순회하며 모든 요소를 하나씩 꺼내야 한다.
이때 사용하는 메서드가 바로 .each() 문.

each문 형식

each(function(index, item) {})

인수로 콜백 함수 하나를 전달받으며 배열 내의 모든 엘리먼트에 대해 이 콜백을 호출한다. 함수로 전달되는 index 인수는 배열내의 요소의 순서값이고 item은 요소이다. 콜백에서는 배열의 각 항목을 전달받아 원하는 작업을 수행.

   //1) $.each(object, function(index, item){});
   //2) $(selector).each(function(index, item){});
   
  <ul>
 	<li>첫번째</ll>
 	<li>두번째</ll>
   </ul>

   <script type="text/javascript">
 	$('li').each(function(index){
 		alert(index + ' , ' + this.text());
   	});
   </script>
	

   // 0 , 첫번째   (index는 0부터 시작하는 것을 알 수 있다.)
   //  1 , 두번째  (존재하는 </li>들을 반복하면서 text만을 가져오도록 한 것)
   

함수 내부에서 항목은 item 인수로 참조하되 이 인수로 전달되는 값은 jQuery 객체가 아니라 DOM 객체이다. 따라서 jQuery 메서드를 호출하려면 $(item)으로 래핑.

출처 : https://bbaksae.tistory.com/31