jQuery의 each(return false, return true, append, innerHTML, 반복문)

※ each란

☞ 배열과 객체를 순회할 목적으로 사용되는 메서드

※ each의 사용 방법 - 1

☞ .each ( 배열 혹 객체 , function ( index, value) {} );

▶ 배열 혹 객체 : 지정할 배열 혹 객체 설정

▶ function의 첫번째 인자(index) : 배열 혹 객체의 index ( 첫번째 요소는 0 )

▶ function의 두번째 인자(value) : 배열 혹 객체의 데이터( 현재 요소를 의미 )

▶ 배열이 아닌 객체를 사용할 경우, 객체의 모든 속성과 값이 전달된다.

※ each의 사용 방법 - 2

☞ $(선택자).each ( function ( index, value) {} );

▶ 선택자 : 지정할 배열 혹 객체 설정

▶ function의 첫번째 인자(index) : 배열 혹 객체의 index ( 첫번째 요소는 0 )

▶ function의 두번째 인자(value) : 배열 혹 객체의 데이터( 현재 요소를 의미 )

▶ 배열이 아닌 객체를 사용할 경우, 객체의 모든 속성과 값이 전달된다.

※ each의 사용 예시 (1) - 객체( value 사용 )

☞ HTML

            <div class="guess_box"><img src="images/jump1.jpg"/></div>
            <div class="guess_box"><img src="images/jump2.jpg"/></div>
            <div class="guess_box"><img src="images/jump3.jpg"/></div>
            <div class="guess_box"><img src="images/jump4.jpg"/></div>

☞ 자바스크립트

      var numRand = Math.floor(Math.random()*4);

      $.each($(".guess_box"),function(index,value){
         if(numRand == index){
             console.log("value : "+value.firstChild.src);
            value.innerHTML += "<span id='has_discount'></span>";
//            value.append("<span id='has_discount'></span>");
            console.log("value : "+value);
            console.log("this : "+$(this));
            return false;
         }

▶ 다음과 같이 span id = has_discount 가 추가된 것을 확인 할 수 있다.

▶ 주석처리 된 부분에서 value.append가 있는데 이 부분을 사용하면 에러가 발생한다.

▶ value에는 append라는 메서드가 존재하지 않기 때문이다.

▶ 이때 value는 object HTMLDivElement이다.

▶ 이전의 값을 유지하면서 뒤에 추가하기 위해서는 +=을 이용하여 기존의 값에 추가하는 형식으로 해야 한다.

▶ return false는 break와 같은 의미로, each 반복문을 종료하게 된다.

▶ 만일 return true는 continue와 같은 의미가 된다.

※ each의 사용 예시 (1) - 객체( this 사용 )

☞ HTML

            <div class="guess_box"><img src="images/jump1.jpg"/></div>
            <div class="guess_box"><img src="images/jump2.jpg"/></div>
            <div class="guess_box"><img src="images/jump3.jpg"/></div>
            <div class="guess_box"><img src="images/jump4.jpg"/></div>

☞ 자바스크립트

      var numRand = Math.floor(Math.random()*4);

                $.each($(".guess_box"),function(index,value){
                if(numRand == index){
                    console.log("value : "+value.firstChild.src);

                   $(this).append("<span id='has_discount'></span>");
//                value.innerHTML += "<span id='has_discount'></span>";
//                value.append("<span id='has_discount'></span>");
                   return false;
              }

▶ 위와 동일하게 출력된 것을 확인 할 수 있다.

▶ $(this)의 경우, append 메서드를 사용하여 추가하면 된다. 

▶ 이는 this 객체의 맨 뒤에 append에 추가하려는 내용을 추가하게 된다.

▶ 이때 $(this)는 object object이다.

▶ return false는 break와 같은 의미로, each 반복문을 종료하게 된다.

▶ 만일 return true는 continue와 같은 의미가 된다.

※ each의 사용 예시 (2) - 객체

☞ 예시 (1) 에서

          $.each($(".guess_box"),function(index,value){

이 부분을

$(".guess_box").each(function(index, value) { 

다음과 같이 바꿔주면 된다.

[출처] jQuery의 each(return false, return true, append, innerHTML, 반복문)|작성자 NekhBet