프로그래밍 남기기

여러 엘리먼트에 어떠한 작업 ( ex: css 변경 ) or 이벤트( ex: click )를 적용하려면, 

여러 엘리먼트에서 각각 엘리먼트에 대해 적용하여야 하나, jQuery에서는 .each()를 제공하고 있다.

먼저, 기본 문법은 아래와 같다.

function의 매개변수로 index와 Element가 있지만 하나만 생략해도 되고, 둘다 생략 가능하다.

.each( function(){} ) <- 이와 같은 일반적인 .each()의 형태가 되겠으나,

각각 엘리먼트를 제어하기 위해서는 function() 내부에서 $('this') 를 사용하면, 

현재 일치되는 엘리먼트에 대해서 제어할수 있게 된다.

위의 내용은 모든 p태그의 색상을 빨강으로 변경하게 된다.

$('this')를 활용하여 각각의 엘리먼트 중에서도 특정한 엘리먼트에 대해서도 제어를 진행할 수 있으므로,

다양하게 활용될 수 있다.

jQuery.each() or $.each()는 자바스크립트 개체 및 배열을 통해서 Iterating에 대한 generic iterator function 이다.

.each()는 jQuery 객체를 통해 반복하여, 일치하는 Element에 대해 실행되는 함수를 가진 Iterator이다.

(이하 내용은 jQuery.each() or $.each()이지만 jQuery.each()로 통일하여 작성 하였습니다. )

위와 같이 jQuery.each()와 .each()이 차이가 있다는 것을 알 수 있다.

그렇다면 각각의 기본 문법을 살펴보자.

문법을 살펴보게 되면 확연하게 차이가 있음을 보여준다.

jQuery.each()는 입력받은 collection에 대한 callback이 이루어지는 반면, 

.each()는 셀렉터( $(' ') )에 일치하는 엘리먼트에 대해 function이 동작하게 된다.

이제는 성능에 대해서 알아보기 되면, 결론은 jQuery.each() > .each() 이다.

그렇다고 매우 차이가 날 정도로 jQuery.each()가 빠른것이 아니라 약간의 나은 성능을 보여준다는 것이다.