jquery

JQUERY – each 와 eq를 알아봅시다

RYUHA/ editor

  • 0 comments
  • 13,377 views
  • 2017년 7월 4일

jquery에서 몇 번 째인지 알기 위해 (index) 사용하는 .eq 메소드와, for문과 같이 반복문 역할의 .each 메소드에 대해 알아봅시다.

jquery에서 몇 번 째인지 알기 위해 (index) 사용하는 .eq 메소드와, for문과 같이 반복문 역할의 .each 메소드에 대해 알아봅시다.

 

# each

먼저 each를 알아봅니다.
each는
jquery.each(function(){});
의 형태로 사용합니다.

 

이때 jquery부분은 selector를 의미합니다.
즉, $(selector).each(function(){}); 이렇게 쓰이는 것이지요!
selector에는 우리가 원하는 요소를 넣으면 됩니다.

 

function은 function(index, element)의 콜백 함수 입니다. 선택된 셀렉터들의 반복문이 한바퀴 돌 때마다 실행되게 되죠.
index는 몇번 째 차례인지 알려주는 것입니다. 즉, for의 i와 같은 역할을 한다고 보면 됩니다.
예를 들어,

 

<ul>
   <li>foo</li>
   <li>bar</li>
</ul>

$( "li" ).each(function( index ) {
      console.log( index + ": " + $( this ).text() );
});

0: foo

1: bar

이렇게 index 값으로 0부터 차례대로 0, 1 이 나오게 될 것입니다.

그리고 루프를 멈추려면, false 값을 리턴해주면서 멈출 수 있지요.

 

element는 현재 선택된 요소를 나타냅니다.

 

콜백 함수 내에서 function(index, element){ $(element).~~} 이런 식으로 사용 가능합니다. element대신 바로 this를 사용해도 되지요.

 

직접 사용 예를 봅시다.
<div class="each_test">
        <ul>
            <li>hi</li>
            <li>hello</li>
            <li>good morning</li>
            <li>good night</li>
        </ul>
</div>
<div class="each_result"></div>

위의 html 코드를 가지는 요소들에, each를 응용해 봅시다.

jquery 부분을 아래처럼 줍시다.

var output = "";
            $('.each_test ul li').each(function(index, element){
                if(index%2 == 0) {$(this).css({color: "red"});}
                output += index + ": " + $(this).text() + "</br>";
            });

            $('.each_result').html(output);

그러면, 다음처럼 결과가 나올 것입니다.

 코드는 간단합니다.

 

li요소들 중 index값이 2로 나눠 나머지가 0인 경우는 빨간 색으로 글씨를 바꿔줍니다.
그리고, output 변수에 html 코드를 추가해주고 인덱스와 요소의 텍스트 값을 아래에 출력하게 해주었습니다.

 

#eq

.eq는 몇 번 째 요소인지 index값을 돌려주기도, 아니면 지정한 순번의 요소를 우리의 입맛대로 바꿔주는  메소드로,
.eq(index)의 형태로 사용됩니다.

 

index는 0부터 시작되고, 양의 정수인 경우 요소의 위치를 순차적으로 찾아줍니다.
음의 정수를 사용하게 되면 마지막 요소부터 역순으로 표시하게 되지요.

 

특정 인덱스의 요소를 원하는 값으로 변화시킬 수 있는 것입니다. 예제를 볼까요.

 

<div class="eq_test">
       <div></div>
       <div></div>
       <div></div>
       <div></div>
       <div></div>
       <div></div>
   </div>

위의 코드처럼 여러개의 div 박스를 만들어줍니다.

style 코드는 다음과 같아요.

<style>
        .eq_test div {
            width: 60px;
            height: 60px;
            margin: 10px;
            float: left;
            border: 2px solid blue;
        }
        .blue {
            background: blue;
        }
    </style>

그리고, jquery로 eq를 사용해주면,

$('.eq_test div').eq(3).addClass("blue");

0부터 시작하므로, 3의 경우, 네번 째 요소가 blue 클래슬르 추가하게 되어 색이 바뀌게 됩니다.

간단하게 each와 eq 메소드에 대해 알아보았습니다.

정말 간단하면서도 여러 곳에서 다양하게 사용할 수 있는 유용한 메소드이므로 잘 기억해두세요!!

https://api.jquery.com/eq/ 와 https://api.jquery.com/each/ 링크를 참조하여 작성하였습니다.

 

RYUHA

만들어 보면서 하나씩 글 씁니당:)

Leave a Reply

avatar