댓글 수정
패스워드 :
답변 쓰기
패스워드 :
- 확인을 누르면 댓글이 삭제됩니다 !! -
패스워드 :
등록일 :
작성자 :
급행 제이쿼리(jQuery) 강좌ㆍ강의 - 초급에서 중급까지만 !
[강좌9] each() 메서드 강좌
제이쿼리의 for 문 같은 존재 each() 메서드를 알아보자!

많이 늦었네요 ㅠㅠ..

마지막 연재를 올린지 벌써 30일이 넘었네요. 잠시 정신을 놨더니 시간이 훌쩍 지나갔습니다.
꾸준해야 한다는게 정말 어렵다는것을 다시 한번 알게 되었습니다.

그럼 다시 진행해 보겠습니다. 늦어서 죄송합니다. ^^;;
▼ 덧보기
댓글 쓰기
이름 : 패스워드 :

jQuery 에서 each 메서드란 무엇인가?

실전 사용시 정말 유용하게 사용되는 메서드중 하나입니다.
스크립트의 for 문 과 유사하다고 보면되겠습니다. 좀 더 유사한 것은 foreach 문 입니다.

일단 예제로 볼까요?
그게 좀 더 와닿겠죠?
설명하기도 더 좋습니다. ㅎㅎ
▼ 덧보기
댓글 쓰기
이름 : 패스워드 :

표정관리 안되는 예제 (버튼을 눌러보세요)


▼ 덧보기
댓글 쓰기
이름 : 패스워드 :

위 예제의 소스 설명

<script type="text/javascript">
 
        function huk1(){
                $('#huk img').each(function(){
                        
this.src = 'http://biketago.com/img/etc/huk2.gif';
                }
);
        }
 
</script>
 
<div style="text-align:center;">
        <div id="huk">
                <img src="http://biketago.com/img/etc/huk1.gif">
                <img src="http://biketago.com/img/etc/huk1.gif">
                <img src="http://biketago.com/img/etc/huk1.gif">
                <img src="http://biketago.com/img/etc/huk1.gif">
                <img src="http://biketago.com/img/etc/huk1.gif">

        </div>
        <br>
        <button type="button" onclick="huk1()">표정관리 안된다 버튼</button>
</div>


- each 메서드는 셀렉터로 선택된 것들을 하나하나 for 문처럼 순차적으로 돌려(?)줍니다.
- $('셀렉터').each(함수) 이렇게 사용합니다.
- each 안에 함수가 들어간다고 하니 뭐지? 생각하실수 있는데요. 어렵지 않습니다.

하나하나 살펴보겠습니다.

        function huk1(){
                $('#huk img').each(function(){
                        this.src = 'http://biketago.com/img/etc/huk2.gif';
                });
        }

huk1 이라는 함수로 버튼을 누를때 실행됩니다.
함수안에 제이쿼리 셀렉터와 each 메서드가 있습니다.

$('#huk img') : id huk 안의 이미지를 찾습니다. 모두 5개가 찾아지겠죠?

그 다음 each 메서드에 아래처럼 함수를 만들어 주었습니다.
이름이 없는 함수로.. (함수가 꼭 이름이 있어야 하는것은 아닙니다.)
아래처럼 그냥 함수 그 자체로 만들 수 있습니다.
이건 이해하려 하지말고 문법이다 생각하고 그냥 외우면 좋습니다.
내공이 쌓이면 자연적으로 알게되는 부분이기도 합니다. ^^;

function(){
    this.src = 'http://biketago.com/img/etc/huk2.gif';
}


셀렉터로 찾아진 이미지가 5개 이므로 each 메서드는 위 함수를 5번 실행시키게 됩니다.
눈여겨 보아야 할것은 위 함수안의 this 입니다.

for 문과 비슷한 역할을 한다고 했었죠?

첫번째 실행때 this 는 셀렉터로 찾아진 첫번째 이미지 입니다. 즉 셀렉터로 찾아진 첫번째 것 을 의미합니다.

그럼 두번째 실행때는? 두번째 이미지 입니다. 그렇게 반복되어 마지막까지 갑니다.

this.src = 'http://biketago.com/img/etc/huk2.gif';

그리고 위 코딩에 의해서 이미지가 모두 바뀌게 됩니다.
this 는 셀렉터에 따라 다양한것이 될 수 있지만 위 예제는 이미지를 대상으로 하므로
.src = '경로' 속성을 이용해서 주소를 바꾸어 주었습니다.

▼ 덧보기
댓글 쓰기
이름 : 패스워드 :

그런데 말입니다... (아래 버튼을 눌러보세요)


댓글2▼ 덧보기
최경식 (2015-04-29 08:20) [수정] [삭제]
항상 좋은 정보를 줘서 감사하게 공부를 하고있습니다.
관리맨 (2015-05-03 18:49)
방문해 주시고 댓글 남겨 주셔서 정말로 감사드립니다.
꾸준히 강좌를 진행해야 하는데 요즘 좀 늦어지고 있습니다. ㅠㅠ..
꾸준히 진행도 하고 더 보기 쉽도록 개편도 예정 중입니다. 많이 방문해 주세요 ^^
그리고 제이쿼리도 열심히 배우세요 !!
댓글 쓰기
이름 : 패스워드 :

위 예제의 설명

<div style="text-align:center;">
        <div id="huk2">
                <img src="http://biketago.com/img/etc/huk2.gif">
                <img src="http://biketago.com/img/etc/huk2.gif">
                <img src="http://biketago.com/img/etc/huk2.gif">
                <img src="http://biketago.com/img/etc/huk2.gif">
                <img src="http://biketago.com/img/etc/huk2.gif"
>
        </div>
        <br>
        <button type="button" onclick="$('#huk2 img').attr('src', 'http://biketago.com/img/etc/huk1.gif')">표정관리 된다 버튼</button>
</div>


$('#huk2 img').attr('src', 'http://biketago.com/img/etc/huk1.gif')

- 위 코딩을 보면 each 메서드 없이도 원하는 것을 구현하였습니다.

attr 메서드를 이용해서 바로 이미지의 주소를 바꿔준 것이지요.
즉! 이런 경우에는 each 메서드를 사용할 필요가 없습니다. 더 간단한 방법이 있으니까요.

여기서는 이해를 돕기위한 예제를 위해서 사용한 것입니다. 실전에서는 비추 입니다.
왠만하면 코딩은 간단하고 쉬우면 좋으니까요.

그럼 each 를 어떤 경우에 사용하면 좋은지 한번 보겠습니다.

▼ 덧보기
댓글 쓰기
이름 : 패스워드 :

이미지 정보 보기 예제 (아래 버튼을 눌러보세요)













▼ 덧보기
댓글 쓰기
이름 : 패스워드 :

위 예제의 설명

<script type="text/javascript">
 
        function imgInfo(){
                $('#img img').each(function(n){
                        // after 메서드를 사용해서 div 태그에 이미지 정보를 넣고 각 이미지 아래에 표시.
                        // n 이라는 변수는 0 부터 시작하여 실행시마다 증가한다. for 문의 i 같은것.
                        // n 이라는 변수 이름에 강제적인 사용 의미는 없고 원하는데로 지정하면 됨.
                        $(this).after('<div style="margin-top:5px;"> 이미지 ' + (n + 1) + ' - ' + this.src + '</div>');
                });
        }
 
</script>
 
<div id="img" style="text-align:center;">
        <button type="button" onclick="imgInfo()">이미지 정보 보기</button><br><br>
        <img src="http://cfile2.uf.tistory.com/image/22063B4854D7351334D218" /><br><br>
        <img src="http://cfile4.uf.tistory.com/image/26138D4854D73515223B87" /><br><br>
        <img src="http://cfile8.uf.tistory.com/image/2515ED4854D735161EDFB9" /><br><br>
        <img src="http://cfile9.uf.tistory.com/image/2523EC4F54D735163729D9" /><br><br>
        <img src="http://cfile28.uf.tistory.com/image/2341424F54D735170D2966" /><br><br>
</div>


$('#img img').each(function(n){

여기서 n 은 일반적으로 사용하는 for 문의 i 변수 같은 역할을 합니다.
매 실행시 마다 1씩 증가합니다. 0 부터 시작하구요.
꼭 n 이라는 이름을 사용하지 않아도 됩니다.

위에서 이미지가 5개 이므로 0 부터 시작해서 4까지 증가합니다.


$(this).after('<div style="margin-top:5px;"> 이미지 ' + (n + 1) + ' - ' + this.src + '</div>');

this 는 각 이미지를 의미합니다. 이 this 를 다시 jquery 를 사용하여 $(this)로 만들었습니다.
after 메서드를 사용하기 위해서죠. after 메서드는 해당것 뒤에 html 을 써주게 됩니다.

위 소스가 실행되면 img 태그 뒤에 div 태그가 동적으로 생성이 됩니다.
해당 div 태그 내용은 이미지 순서와 주소가 들어가도록 했습니다.

일단 이 소스를 보면 크게 우려한 만한 수준으로 어려운것은 없습니다. ^^;
 

"each 메서드는 기본 메서드로는 도저히 안되겠다 싶을때 사용한다."
정도로 생각하면 좋을듯(?) 합니다.

새로운 예제는 틈틈히 추가해 보겠습니다.


현재 CSS 공작소 라는 CSS 예제 위주의 참고사이트를 개발하고 있습니다.
나중에 상황을 봐서 제이쿼리 공작소도 해볼 예정입니다. ^^;

예제 위주의 참고사이트 이고. 강좌사이트는 아닙니다.

▼ 덧보기
댓글 쓰기
이름 : 패스워드 :

바로 실행 가능한 소스 (이 강좌의 모든 소스입니다)

▼ 덧보기
댓글 쓰기
이름 : 패스워드 :

그럼

다음 연재를 기대해 주세요 !!
▼ 덧보기
댓글 쓰기
이름 : 패스워드 :