jQuery.each()
jQuery.each()
설명 : 객체와 배열을 반복적으로 반복하는 데 사용할 수있는 일반 반복기 함수입니다. length 속성을 가진 배열 및 배열과 유사한 객체 (함수의 arguments 객체 등)는 0에서 length-1 사이의 숫자 인덱스에 의해 반복됩니다. 다른 객체는 명명 된 속성을 통해 반복됩니다.
이 $.each()함수는 $ (selector) .each () 와 같지 않습니다 . jQuery 객체를 독점적으로 반복하는 데 사용됩니다. 이 $.each()함수는 객체인지 배열인지에 상관없이 모든 컬렉션을 반복하는 데 사용할 수 있습니다. 배열의 경우 콜백은 매번 배열 인덱스와 해당 배열 값을 전달받습니다. 값은 this키워드를 통해 액세스 할 수도 있지만 자바 스크립트는 단순한 문자열이나 숫자 값이더라도 항상 this값을 줄 바꿈합니다 Object. 메서드는 첫 번째 인수 인 반복 된 객체를 반환합니다.
참고 : 이 $.each()함수 length는 전달 된 컬렉션 의 속성을 내부적으로 검색하여 사용합니다 . 따라서 콜렉션에 length- 예 {bar: 'foo', length: 10}- 라는 속성이 있으면 함수가 예상대로 작동하지 않을 수 있습니다.
$.each([ 52, 97 ], function( index, value ) {
alert( index + ": " + value );
});
이렇게하면 두 가지 메시지가 생성됩니다.
0 : 52
1 : 97
객체가 컬렉션으로 사용되면 콜백은 매번 키 - 값 쌍을 전달합니다.
var obj = {
"flammable": "inflammable",
"duh": "no duh"
};
$.each( obj, function( key, value ) {
alert( key + ": " + value );
});
다시 한번, 이것은 두 개의 메시지를 생성합니다 :
인화성 : 인화성
duh : 아니야.
우리는 $.each()콜백 함수를 반환함으로써 특정 반복에서 루프를 깨뜨릴 수 있습니다 false. false 가 아닌 값을 반환 continue하면 for 루프 의 명령문 과 동일 합니다. 즉시 다음 반복으로 건너 뜁니다.
예 :
각 숫자를 단어와 숫자로 표시하는 배열을 반복합니다.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery.each demo</title>
<style>
div {
color: blue;
}
div#five {
color: red;
}
</style>
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
</head>
<body>
<div id="one"></div>
<div id="two"></div>
<div id="three"></div>
<div id="four"></div>
<div id="five"></div>
<script>
var arr = [ "one", "two", "three", "four", "five" ];
var obj = { one: 1, two: 2, three: 3, four: 4, five: 5 };
jQuery.each( arr, function( i, val ) {
$( "#" + val ).text( "Mine is " + val + "." );
// Will stop running after "three"
return ( val !== "three" );
});
jQuery.each( obj, function( i, val ) {
$( "#" + i ).append( document.createTextNode( " - " + val ) );
});
</script>
</body>
</html>
게시글 목록
| 번호 | 제목 |
|---|---|
| 16181 | |
| 16175 | |
| 16173 |
기타
일반적인 미디어쿼리
4
|
| 16172 |
PHP
특정 ip에서만 모바일 사용
|
| 16170 | |
| 16168 |
PHP
하루전 일주일전 한달전
1
|
| 16167 |
JavaScript
어제날짜, 내일날짜 구하기
|
| 16161 |
JavaScript
날짜형식 체크
2
|
| 16152 | |
| 16145 | |
| 16133 | |
| 16131 | |
| 16128 | |
| 16122 | |
| 16117 |
PHP
php async
3
|
| 16102 | |
| 16099 | |
| 16095 | |
| 16089 |
JavaScript
스택(stack)을 이용한 사칙연산(+ - * /) 계산기
4
|
| 16088 | |
| 16077 |
JavaScript
다양한 카운트다운 소스
6
|
| 16065 |
PHP
간단한 PHP 프레임워크
10
|
| 16060 |
jQuery
atj.js
3
|
| 16055 | |
| 16052 |
JavaScript
네이버 지도 api v3 주소->좌표 변환해서 출력하는 예제
5
|
| 16051 | |
| 16050 | |
| 16046 | |
| 16039 | |
| 16027 |
댓글 작성
댓글을 작성하시려면 로그인이 필요합니다.
로그인하기