웹퍼블리셔-입문]제이쿼리 each, data 사용법

오늘은 제이쿼리의 each와 data에 대해 알아보도록 하겠습니다.

1. "each"이란?

- 제이쿼리의 객체 수만큼 반복하는 함수

- 자바스크립트의 for문과 유사

- 선택자에게 속성을 순서대로 지정

$('선택자').each(function(){  });

 

2. "data-XX"는?

- 내가 원하는 값을 태그에 저장

- 제이쿼리의 내장된 속성과 구분이 되지 않으면 혼란을 줄 수 있어서 주의!!

- HTML5에서 새로 나온 속성

- 새로운 선택자 잡는 법

 

예제를 한번 풀어볼까요??

 

웹브라우저에 이런 구조를 만들어주고 번호를 클릭했을때 배경색이 바뀌도록 만들어보겠습니다.

먼저 기본구조부터 만들어야 하겠죠?? 

<script>에 src로 제이쿼리를 연결해주고 그 뒤에 <script>를 작성합니다.

이제 body 구조를 짜보도록 하겠습니다.

간편하게 ul로 box를 만들어주고 li로 숫자를 감싸줍니다. 이제 style 시트로 올라가서 꾸며줍니다.

웹브라우저를 확인해보면,, 이러한 결과를 볼 수 있습니다.

이제 클릭했을 때 li의 배경색상이 바뀌게 script로 가줍니다.

$(document).ready(function(){

     $('#box>li').each(function(index){           
          $(this).attr('data-a',index);
      });
      =>attr()로 태그에 속성을 추가한다.
      =>data-XX는? 
          - 태그의 속성
          - index 순서값을 지정
});

이렇게 지정했을 때 웹브라우저에서 검색창을 눌러보면 <li>에 data-a로 순서값이 정해진 것을 볼 수가 있습니다.

이제 클릭했을 때, <li>의 배경색상이 바뀌도록 이벤트를 짜면 됩니다.

$(document).ready(function(){

     $('#box>li').each(function(index){           
          $(this).attr('data-a',index);
      }).click(function(){
           var i = $(this).attr('data-a);
           => #box안쪽의 li에게서 지정한 data-a 값을 가져온다.
           => 내가 클릭한 요소의 순서값을 변수에 저장

          $('#box>li').eq(i).addClass('active');
          => 추가된 active라는 이름의 Class를 #box안쪽의 li에게 순서대로 값을 준다.
          => addClass는?
                - style시트에서 작성된 active(내가 원하는 클래스명)라는 클래스를 li에게 추가해준다는 뜻
      });
      
});

이렇게 작성하면 됩니다.

여기서 active라는 이름으로 작성한 이벤트는 style시트에 올라가서 작성하면 됩니다.

<style>
--------------

.active{
background-color: lightseagreen;
}

</style>

웹브라우저에서 확인해볼까요??

자, 클릭했을 때 li의 배경 색상이 바뀌는 것을 볼 수 있네요. 완성입니다!