.each()

jQuery 공작소에 방문해 주셔서 감사드립니다. 쉬운 예제로 느껴보세요!!

each 메서드는 지정된 요소를 반복 처리합니다.

+_+
예제 1
기본 예제
보기
아래에 빨간칸에 텍스트를 입력해 보세요 ^^






소스
<style type="text/css">
    .css_test input {
        border-radius : 5px;
        border : 3px solid red;
        box-shadow : 0 0 3px gray, 0 0 3px silver inset;
        margin-top : 5px;
        padding : 10px;
        width : 500px;
    }
    .css_test input.copyed {
        border-color : blue;
    }
</style>

<div class="css_test">
    아래에 빨간칸에 텍스트를 입력해 보세요 ^^<br>
    <input type="text" name="ori" onkeyup="j_test()" /><br><br>
    <input type="text" name="copyed" class="copyed" /><br>
    <input type="text" name="copyed" class="copyed" /><br>
    <input type="text" name="copyed" class="copyed" /><br>
    <input type="text" name="copyed" class="copyed" /><br>
</div>

<script type="text/javascript">
    function j_test(){
        var text = $('.css_test [name=ori]').val(); // 루프안에 들어갈 반복사용될 값은 변수처리 해주면 좋음.
        $('.css_test [name=copyed]').each( function(){
            $(this).val(text); // this 는 셀렉터로 선턱된 각 요소를 의미합니다.
        } );
    }
</script>
관련 CSS
jQuery

$( 셀렉터 ).each( function(){
        코딩 ...
} )
- each 메소드의 기본적인 사용예제입니다.


var text = $( '.css_test [name=ori]' ).val();
$( '.css_test [name=copyed]' ).each( function(){
        $( this ).val( text );
} )
- 클래스명이 css_test 인것에서 이름이 copyed 인것을 찾아
- 각각 순서대로 루프를 돌며 뭔가를 실행합니다.
- this 는 셀렉터로 찾아진 것을 의미하며 그 갯수만큼 반복됩니다. for 문을 생각하면 좋습니다.
- 그 결과 빨간네모칸에 입력한 내용이 파란색에 전부입력됩니다.

- 사실 이 예제는 $( '.css_test [name=copyed]' ).val( text ) 로 간단히 바꿀 수도 있습니다.

예제 2
인덱스를 사용하는 예제
보기
아래에 빨간칸에 텍스트를 입력해 보세요 ^^






소스
<style type="text/css">
    .css_test input {
        border-radius : 5px;
        border : 3px solid red;
        box-shadow : 0 0 3px gray, 0 0 3px silver inset;
        margin-top : 5px;
        padding : 10px;
        width : 500px;
    }
    .css_test input.copyed {
        border-color : blue;
    }
</style>

<div class="css_test">
    아래에 빨간칸에 텍스트를 입력해 보세요 ^^<br>
    <input type="text" name="ori" onkeyup="j_test()" /><br><br>
    <input type="text" name="copyed" class="copyed" /><br>
    <input type="text" name="copyed" class="copyed" /><br>
    <input type="text" name="copyed" class="copyed" /><br>
    <input type="text" name="copyed" class="copyed" /><br>
</div>

<script type="text/javascript">
    function j_test(){
        var text = $('.css_test [name=ori]').val(); // 루프안에 들어갈 반복사용될 값은 변수처리 해주면 좋음.
        $('.css_test [name=copyed]').each( function(n){
            $(this).val(n + ' : ' + text); // this 는 셀렉터로 선턱된 각 요소를 의미합니다.
        } );
    }
</script>
관련 CSS
jQuery

var text = $( '.css_test [name=ori]' ).val();
$( '.css_test [name=copyed]' ).each( function( n ){
        $( this ).val( n + ' : ' + text );
} )

- 인덱스 번호를 전달하는 예제입니다. for 문의 i 를 생각해 보세요.
- 함수에 매개변수를 정해주면 순차적으로 0 부터 증가하는 값이 전달됩니다.
- 예제에서는 n 을 사용했습니다.

예제 3
인덱스를 사용하여 이미지 시간차 변경
보기
소스
<style type="text/css">
    .css_test {
        margin-top : 10px;
    }
</style>

<button type="button" onclick="j_test()">눌러봐여</button>
<button type="button" onclick="$('.css_test img').attr('src', 'http://biketago.com/img/etc/huk1.gif');">다시하기</button>
<div class="css_test">
    <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" />
    <img src="http://biketago.com/img/etc/huk1.gif" />
    <img src="http://biketago.com/img/etc/huk1.gif" />
</div>

<script type="text/javascript">
    function j_test(){
        $('.css_test img').each( function(n){
            var img = this; // setTimeout 에서 사용하기 위해 this 를 지역변수로 만듬
            setTimeout(function(){
                $(img).attr('src', 'http://biketago.com/img/etc/huk2.gif');
            }, n * 500); // 0.5 초 간격으로 이미지 변경
        });
    }
</script>
관련 CSS
jQuery

$( '.css_test img' ).each( function( n ){
        var img = this;
        setTimeout( function(){
                $( img ).attr( 'src', 'http://biketago.com/img/etc/huk2.gif' );
        }, n * 500);
});

- 간단한 코드로 이미지에 순차적인 처리를 한 예제입니다.

예제 4
실행 멈추기
보기

3번째 얼굴까지만 표정이 변합니다.
소스
<style type="text/css">
    .css_test {
        margin-top : 10px;
    }
</style>

<button type="button" onclick="j_test()">눌러봐여</button>
<button type="button" onclick="$('.css_test img').attr('src', 'http://biketago.com/img/etc/huk1.gif');">다시하기</button><br>
3번째 얼굴까지만 표정이 변합니다.<br>
<div class="css_test">
    <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" />
    <img src="http://biketago.com/img/etc/huk1.gif" />
    <img src="http://biketago.com/img/etc/huk1.gif" />
</div>

<script type="text/javascript">
    function j_test(){
        $('.css_test img').each( function(n){
            if(n > 2) return false; // 실행 멈추기
            var img = this;
            setTimeout(function(){
                $(img).attr('src', 'http://biketago.com/img/etc/huk2.gif');
            }, n * 500);
        });
    }
</script>
관련 CSS
jQuery

if( n > 2 ) return false;

- 위 처럼 return false 를 사용하여 실행을 멈출 수 있습니다.
- each 메서드를 입력폼의 빈 값 체크에 사용한다면 값이 없을때 경고창을 띄우고 멈추는 용도로 쓰면되겠죠.
- 만약 멈추는 처리를 하지않는다면 빈 값인 모든 입력부분에서 경고창이 계속 뜨게되겠죠.

예제 5
선택한 체크박스의 값을 리스트로 보여주기
보기
좋아하는 동물을 골라 보세요 ~

굿펠로우 나무타기 캥거루
뉴칼레도니아 가고일 도마뱀붙이
베네주엘라 붉은배 청타란튤라
북아메리카 검은머리 흰죽지
살찐꼬리 난장이 여우원숭이
윌리암슨 수액빨이 딱다구리
쿠비어 난장이 카이만
큰꼬리 검은 찌르레기 사촌
여기 운영자

소스
<style type="text/css">
    .css_test textarea {
        width : 500px;
        height : 200px;
    }
</style>

<div class="css_test">
    <b>좋아하는 동물을 골라 보세요 ~</b><br><br>
    <input type="checkbox" value="굿펠로우 나무타기 캥거루" />굿펠로우 나무타기 캥거루<br>
    <input type="checkbox" value="뉴칼레도니아 가고일 도마뱀붙이" />뉴칼레도니아 가고일 도마뱀붙이<br>
    <input type="checkbox" value="베네주엘라 붉은배 청타란튤라" />베네주엘라 붉은배 청타란튤라<br>
    <input type="checkbox" value="북아메리카 검은머리 흰죽지" />북아메리카 검은머리 흰죽지<br>
    <input type="checkbox" value="살찐꼬리 난장이 여우원숭이" />살찐꼬리 난장이 여우원숭이<br>
    <input type="checkbox" value="윌리암슨 수액빨이 딱다구리" />윌리암슨 수액빨이 딱다구리<br>
    <input type="checkbox" value="쿠비어 난장이 카이만" />쿠비어 난장이 카이만<br>
    <input type="checkbox" value="큰꼬리 검은 찌르레기 사촌" />큰꼬리 검은 찌르레기 사촌<br>
    <input type="checkbox" value="운영자 (뀨~)" />여기 운영자<br>
    <br>
    <textarea></textarea>
</div>

<script type="text/javascript">
    $('.css_test [type=checkbox]').bind('click', j_test); // 체크박스에 클릭이벤트 지정

    function j_test(){
        var txt = '';
        $('.css_test [type=checkbox]:checked').each(function(){
            txt += $(this).val() + '\n';
        });
        $('.css_test textarea').val(txt);
    }
</script>
관련 CSS
jQuery
참고 메서드 : .bind()
jQuery 홈페이지 .each() API 문서 : https://api.jquery.com/each/