[jQuery] 반복문

Javascript에서는

배열을 대괄호 []로 선언하고,

객체는 중괄호 {}로 선언합니다.

 

배열

let arr = [1, 56, 3, 86, 12];

 

객체
let obj = {menu : "초밥", price : 15000};

 

배열속에 객체를 넣는 방법도 있습니다.

 

let arrobj = [{

    menu : "라면",

    price : 4000,

   },

   {

       menu : "김밥",

        price : 3000,         

       

   },

   

   {

       menu : "돈까스",

        price : 7000,          

       

   }

    

   ];

 

 jQuery에서는 배열을 대상으로 반복문을 사용할 수 있습니다.

$.each를 사용해서 구현할 수 있는데요.

형식은 다음과 같습니다.

 

$.each(배열, 데이터 하나 만날때마다 호출할 콜백함수)

위 반복문은

인덱스도 가지고 있고, 객체에 접근하기에도 용이하다는 장점이 있습니다.

예제를 통해 살펴봅시다.

$.each(arrobj, function(i, lunch){

    alert(i + 1 + " ) " + lunch.menu + " : " + lunch.price);

       

     

     });

 

위에서 선언한 배열을 반복문에 넣고 돌리는데요.

파라미터인 i는 index를 의미하고,

lunch는 배열의 각각 요소를 lunch라는 변수에 넣어서

접근하는 것을 의미합니다.

첫번째 배열의 메뉴와 가격부터

마지막 배열까지 반복문을 돌려서

alert로 배열의 요소를 출력합니다.

 

다음은

DOM객체 대상 반복문을 살펴보겠습니다.

형식은 다음과 같습니다.

  
 $(선택자).each(DOM객체 하나 만날떄마다 호출할 콜백함수)

 

예제를 통해 살펴보겠습니다.

 

  $("h1").each(function(i, h){

     

        $(h).css("font-size", (i+1) * 10 + "pt");

         

         });

 

선택자는 h1입니다.

모든 "h1" 태그를 대상으로 반복을 진행합니다.

파라미터는 i와 h인데요.

i는 인덱스를 의미하고

h는 현재 반복되고 있는 DOM객체를 의미합니다.

실행되고 있는 코드를 살펴보면

현재 h1태그 (첫번쨰 h1태그)의 css부터 변경합니다.

font-size를 i+1( = 1) * 10 + pt 만큼 변경하는데요.

첫번째 font-size = 10pt,

두번쨰는 font-size = 20pt,

세번째는 30pt순으로 변경될 것입니다.

 

출력 결과