[JavaScript/jQuery] each(index) - 선택된 요소 반복

안녕하세요~

이번엔 jQuery의 요소 반복으로 매우 매우 자주 사용되는 each() 에 대해 알아보려 합니다~

클라이언트 프로그래밍을 하다보면 자주 마주치게 되는데요.

요새 쇼핑몰에서 제품을 구매할 때 옵션을 선택하면 해당 옵션 별로 상품 카드(?)가 추가 되는 것이 일반적이죠.

제가 써놓고도 뭔말인지 모르겠네요 ㅋㅋ

사진으로 보시죠!

[출처 : trymoon(트라이문)]

온라인 쇼핑몰에서 이런 화면 많이 보셨을겁니다.

상품 옵션을 고르면 해당 옵션의 상품이 카드형식으로 하나하나 추가되는 방식이죠.

이렇게 사용자의 입력에 따라 html 추가되는 건 append() 라는 메서드를 쓰시면 됩니다!

옵션 클릭 리스너에서 옵션 클릭을 감지하고 클릭한 요소에서 옵션(컬러,상품명 등)값 들을 가져와서 append로 특정 영역에 추가하게 됩니다.

이렇게 append로 상품들이 담겼다고 가정하고, 이제 장바구니에 담는 상황을 생각해봅니다.

다수의 상품을 장바구니에 넘기는 방법으로 URL에 컬러 값을 넣는 방식으로 하겠습니다.

예를 들어 "domain.com?black^red" 이런식으로 말이죠.

저 URL은 black과 red 라는 두개의 컬러를 넘기는 URL 입니다. 

일단 추가된 다수의 상품카드를 읽어서 url의 ? 뒤에 있는 쿼리스트링을 만듭니다.

이때 이 포스팅에서 다루기로한 each()가 쓰입니다.

1개 이상의 반복되는 요소가 있을 때 이를 다 반복문 처럼 하나씩 읽어들일 수 있습니다.

$('#choice_list .card').each(function(index){
    console.log(index);
    if(index == 0) {
        color_txt = $(this).find(".color").text();
    } else {
        color_txt += "^"+$(this).find(".color").text();
    }
    cardCount++;
});

소스를 분석해볼까요?

저 상품카드가 담기는 wrapper div는 id가 choice_list 입니다.

이 wrapper 안에 card 라는 클레스명을 가진 요소가 반복되는 카드 요소 입니다.

이 상품 카드요소를 반복합니다.

each의 매개변수인 익명함수의 파라미터는 index 입니다. 

상품카드가 존재하는 만큼 반복하면서 index는 배열 처럼 0~상품갯수-1 까지 입니다.

이제 틀은 잡혔습니다! 이제 장바구니에 넘기기전 쿼리스트링을 만들 수 있습니다.

index가 0이면 즉 첫번째 요소면 color_txt 변수에 현재 index를 가진 card의 컬러, 즉 상품의 색상 요소를 찾아 그 요소의 text 값을 넣습니다.

여기서 $(this)가 반복되고 있는 현재의 요소를 가리킵니다.

배열을 반복할 때 a[0], a[1] 이런식으로 옮겨가듯 말이죠.

find()는 어떤 요소안에서 요소를 찾을때 씁니다. 여기선 .card라는 div 요소 안에 .color 라는 요소를 찾는겁니다. 

상품카드의 div.color에 색상 정보가 들어있거든요!

그리고 text()는 요소안에 있는 텍스트를 가져옵니다. 

여기까지하게 되면 컬러를 가져와 쿼리스트링을 1차로 만들게 된것이고

index가 0이 아닌, 즉 첫번째 요소가 아닌 애들은 ^ 구분자를 이용해 뒤로 계속 붙어야하므로 

color_txt += "^"+새로 가져온 컬러값을 계속 뒤로 붙힙니다.

이게 직관적으로 보면 되게 단순한건데 괜히 제가 상세하게 설명하려다가 왠지 난해해지는 것 같기도하네요..

each 그냥 단순히 선택된 요소를 반복하는 하는 것입니다.

예제의 상품 담기와 비슷한 경우에서 언제든 응용하여 사용할 수 있습니다.

php의 foreach와 거의 같다고 보셔도 됩니다. 

직접 한번 쳐보고 console.log로 눈으로 확인 해보는게 제일 중요합니다!

다들 열 코딩 열 실습 하세요! 같이 화이팅해요~