jQuery / Reference / .each()
개요
.each()는 선택한 요소가 여러 개일 때 각각에 대하여 반복하여 함수를 실행합니다.
문법
.each( function )
- 특정 조건을 만족할 때 반복 작업에서 빠져려면 다음을 추가합니다.
return false
예제 1
- p 요소에 각각 다른 클래스를 추가합니다.
<!doctype html>
<html lang="ko">
<head>
<meta charset="utf-8">
<title>jQuery</title>
<style>
.s1 {color: red;}
.s2 {color: blue;}
.s3 {color: green;}
.s4 {color: brown;}
</style>
<script src="//code.jquery.com/jquery-3.3.1.min.js"></script>
<script>
$( document ).ready( function() {
var i=1
$( 'p' ).each( function() {
$( this ).addClass( 's' + i );
i = i + 1;
} );
} );
</script>
</head>
<body>
<p>Lorem</p>
<p>Ipsum</p>
<p>Dolor</p>
<p>Amet</p>
</body>
</html>
예제 2
- 반복 작업을 두번만 하고 빠져나옵니다.
<!doctype html>
<html lang="ko">
<head>
<meta charset="utf-8">
<title>jQuery</title>
<style>
.s1 {color: red;}
.s2 {color: blue;}
.s3 {color: green;}
.s4 {color: brown;}
</style>
<script src="//code.jquery.com/jquery-3.3.1.min.js"></script>
<script>
$( document ).ready( function() {
var i=1
$( 'p' ).each( function() {
$( this ).addClass( 's' + i );
i = i + 1;
if ( i == 3 ) {
return false;
}
} );
} );
</script>
</head>
<body>
<p>Lorem</p>
<p>Ipsum</p>
<p>Dolor</p>
<p>Amet</p>
</body>
</html>
jQuery / Reference / :contains()
:contains()는 특정 문자열을 포함한 요소를 선택하는 선택자입니다. 문자열 포함 여부를 따질 때 대소문자를 구분한다는 점에 주의합니다.
jQuery / Reference / .append()
개요 .append()는 선택한 요소의 내용의 끝에 콘텐트를 추가합니다. 문법 .append( content ) 예제 1 순서 없는 목록 마지막에 Dolor를 추가합니다. <!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> <title>jQuery</title> <style> body { line-height: ...
개요 .wrap()은 선택한 요소를 원하는 태그로 감쌉니다. 문법 .wrap( wrappingElement ) 예를 들어 다음과 같이 하면 p 요소를 div로 감쌉니다. $( 'p' ).wrap( '<div></div>' ); class나 id 값을 추가할 수도 있습니다. $( 'p' ).wrap( '<div id="ab" class="cd"></div>' ); 여러 태그로 감쌀 수도 있습니다. $( 'p' ).wrap( '<div><strong></strong></div>' ); 예제 클래스의 값이 a인 p 요소를 blockquote 태그로 감쌉니다. <!doctype html> <html lang="ko"> <head> ...
jQuery / Reference / .insertAfter()
개요 .insertAfter()는 특정 요소 뒤에 요소를 추가하거나 이동시킵니다. 문법 .insertAfter( target ) 예제 1 h1 요소 뒤에 <p>World</p>를 추가합니다. <!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> <title>jQuery</title> <style> body { font-family: Consolas, monospace; ...
jQuery / Reference / .unwrap()
개요 .unwrap()은 선택한 요소의 상위 태그를 제거합니다. 문법 .unwrap() 예를 들어 다음은 h1 요소의 바로 상위의 태그를 제거합니다. $( 'h1' ).unwrap(); 예제 버튼을 크릭하면 h1 요소의 상위 태그인 div 태그를 제거합니다. <!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> <title>jQuery</title> <style> div { ...
jQuery / Reference / .prepend()
개요 .prepend()는 선택한 요소의 내용의 앞에 콘텐트를 추가합니다. 문법 .prepend( content ) 예제 1 순서 없는 목록 처음에 Dolor를 추가합니다. <!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> <title>jQuery</title> <style> body { line-height: ...
개요 .has()로 특정 요소를 가지고 있는 요소를 선택할 수 있습니다. 문법 .has( selector ) 예를 들어 다음은 span 요소를 가지고 있는 h1 요소를 를 선택합니다. $( 'h1' ).has( 'span' ) 예제 span 요소를 포함하고 있는 h1 요소의 글자색을 빨간색으로 만듭니다. <!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> <title>jQuery</title> <script ...
jQuery / Reference / .slideDown()
개요 .slideDown()은 선택한 요소를 아래쪽으로 서서히 나타나게 합니다. 문법 .slideDown( ) duration 요소가 나타날 때까지 걸리는 시간입니다. 단위는 1/1000초, 기본값은 400입니다. fast나 slow로 정할 수 있습니다. fast는 200, slow는 600에 해당합니다. easing 요소가 나타나는 방식을 정합니다. swing과 linear가 가능하며, 기본값은 swing입니다. complete 요소가 나타난 후 수행할 작업을 정합니다. 예제 1 버튼을 클릭하면 파란색 배경의 div ...
jQuery / Reference / .prependTo()
개요 .prependTo()는 선택한 요소를 다른 요소의 시작 태그 뒤로 이동시킵니다. 문법 .prependTo( target ) 예제 abc를 클래스 값으로 가지는 span 요소를 h1 요소의 <h1> 뒤로 이동시킵니다. <!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> <title>jQuery</title> <style> body { ...
.width()는 선택한 요소의 가로 크기를 반환하거나, 가로 크기를 변경합니다.