jQuery - $.each()

제이쿼리는 for ... in 반복문과 같이 배열을 관리할 수 있는 메소드를 제공합니다. $.each() 는 객체나 배열의 유형에 관게없이 반복문을 수행합니다.

each() 는 아래 방법으로 제어할 수 있습니다. 여기서 Object 는 객체나 배열, 요소가 될 수 있으며, 요소는 $(요소) 와 같이 오브젝트화해서 접근합니다.

$.each( Object, callback(key, val) {
 ... 내용
});


$( Object ).each( callback(key, val) {
 ... 내용
});

$.each()

배열을 대입할 경우 콜백 함수는 배열의 수 만큼 key 와 value 값을 전달 받을 수 있습니다. 다음은 배열을 전달한 결과입니다. 여기서 배열은 key 가 인덱스가 되고, 0 부터 카운터합니다.

<script>
var arr = [
  '안녕', '하보니'
];

$.each(arr, function (index, val) {
  var item = index + ": " + val;
  
  console.log(item);
});
/*
  결과:
  0: 안녕
  1: 하보니
*/
</script>

다음은 배열이 아닌 객체를 전달한 결과입니다.

<script>
var obj = {
  '브라우저' : '크롬',
  '제조사' : '구글',
  '업종' : '인터넷'
};

$.each(obj, function (key, val) {
  var item = key + ": " + val;
  
  console.log(item);
});
/*
  결과:
  브라우저: 크롬
  제조사: 구글
  업종: 인터넷
*/
</script>

다음은 요소에 접근할 수 있는 방법을 설명합니다. 요소에 접근하려면 $.each( $(요소), callback ) 으로 접근할 수 있습니다.

<script>
$(function(){
 $.each($("#use-nth div"), function (index) {
   var item = index + ": " + $(this).text();
  
   console.log(item);
 /*
  결과:
  0: 알 수 없는 브라우저
  1: 사파리
  2: 크롬
  3: 엣지
  4: 파이어폭스
  5: 익스플러어
  6: 기타
 */
 });
});
</script>

<div id="use-nth">
  <div>알 수 없는 브라우저</div>
  <div>사파리</div>
  <div>크롬</div>
  <div>엣지</div>
  <div>파이어폭스</div>
  <div>익스플러어</div>
  <div>기타</div>
</div>

$().each()

위 예제를 아래와 같이 동일하게 처리할 수 있습니다.

<script>
var arr = [
  '안녕', '하보니'
];

$(arr).each(function (index, val) {
  var item = index + ": " + val;
  
  console.log(item);
/*
  결과:
  0: 안녕
  1: 하보니
*/
});
</script>

다음은 셀렉터를 이용해 요소의 내용을 반환합니다.

<script>
$(function(){
 $("#use-nth div").each(function (index) {
   var item = index + ": " + $(this).text();
  
   console.log(item);
 /*
  결과:
  0: 알 수 없는 브라우저
  1: 사파리
  2: 크롬
  3: 엣지
  4: 파이어폭스
  5: 익스플러어
  6: 기타
 */
 });
});
</script>

<div id="use-nth">
  <div>알 수 없는 브라우저</div>
  <div>사파리</div>
  <div>크롬</div>
  <div>엣지</div>
  <div>파이어폭스</div>
  <div>익스플러어</div>
  <div>기타</div>
</div>

다음은 find() 로 접근해서 반복문을 수행합니다.

<script>
$(function(){
 $("dom").find("#use-nth").find("div").each(function (index, val) {
   var item = index + ": " + $(this).text();
  
   console.log(item);
 });
});
</script>

<dom>
 <div id="use-nth">
  <div>알 수 없는 브라우저</div>
  <div>사파리</div>
  <div>크롬</div>
  <div>엣지</div>
  <div>파이어폭스</div>
  <div>익스플러어</div>
  <div>기타</div>
 </div>
</dom>