jQuery 공작소 : .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_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_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', '//superkts.com/img/huk1.gif');">다시하기</button>
<div class="css_test">
<img src="//superkts.com/img/huk1.gif" />
<img src="//superkts.com/img/huk1.gif" />
<img src="//superkts.com/img/huk1.gif" />
<img src="//superkts.com/img/huk1.gif" />
<img src="//superkts.com/img/huk1.gif" />
<img src="//superkts.com/img/huk1.gif" />
<img src="//superkts.com/img/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', '//superkts.com/img/huk2.gif');
}, n * 500); // 0.5 초 간격으로 이미지 변경
});
}
</script>
.css_test {
margin-top : 10px;
}
</style>
<button type="button" onclick="j_test()">눌러봐여</button>
<button type="button" onclick="$('.css_test img').attr('src', '//superkts.com/img/huk1.gif');">다시하기</button>
<div class="css_test">
<img src="//superkts.com/img/huk1.gif" />
<img src="//superkts.com/img/huk1.gif" />
<img src="//superkts.com/img/huk1.gif" />
<img src="//superkts.com/img/huk1.gif" />
<img src="//superkts.com/img/huk1.gif" />
<img src="//superkts.com/img/huk1.gif" />
<img src="//superkts.com/img/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', '//superkts.com/img/huk2.gif');
}, n * 500); // 0.5 초 간격으로 이미지 변경
});
}
</script>
관련 CSS
jQuery
$( '.css_test img' ).each( function( n ){
var img = this;
setTimeout( function(){
$( img ).attr( 'src', '//superkts.com/img/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', '//superkts.com/img/huk1.gif');">다시하기</button><br>
3번째 얼굴까지만 표정이 변합니다.<br>
<div class="css_test">
<img src="//superkts.com/img/huk1.gif" />
<img src="//superkts.com/img/huk1.gif" />
<img src="//superkts.com/img/huk1.gif" />
<img src="//superkts.com/img/huk1.gif" />
<img src="//superkts.com/img/huk1.gif" />
<img src="//superkts.com/img/huk1.gif" />
<img src="//superkts.com/img/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', '//superkts.com/img/huk2.gif');
}, n * 500);
});
}
</script>
.css_test {
margin-top : 10px;
}
</style>
<button type="button" onclick="j_test()">눌러봐여</button>
<button type="button" onclick="$('.css_test img').attr('src', '//superkts.com/img/huk1.gif');">다시하기</button><br>
3번째 얼굴까지만 표정이 변합니다.<br>
<div class="css_test">
<img src="//superkts.com/img/huk1.gif" />
<img src="//superkts.com/img/huk1.gif" />
<img src="//superkts.com/img/huk1.gif" />
<img src="//superkts.com/img/huk1.gif" />
<img src="//superkts.com/img/huk1.gif" />
<img src="//superkts.com/img/huk1.gif" />
<img src="//superkts.com/img/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', '//superkts.com/img/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_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/