1. each() / $.each() 메서드**
$("요소 선택").each(function)
$.each($("요소 선택"), function)
배열에 저장된 문서 객체 만큼 메서드가 반복 실행 됨.
배열에 저장된 객체의 인덱스 순서대로 하나씩 접근하여 객체를 선택하고 인덱스를 구함.
선택자로 선택한 요소(문서객체)는 배열에 순서대로 저장됨.
이 메서드는 배열에 저장된 요소를 순서대로 하나씩 선택하면서 인덱스 정보를 가져 옴.
$("요소선택").each(function(매개변수1, 매개변수2){})
$.each($("요소 선택"), function(매개변수1, 매개변수2){})
배열에 저장된 요소의 개수만큼 메서드를 반복 실행 함. 메서드를 실행할 때 마다 매개변수1, 매개변수2에는 배열에 저장된 요소와 인덱스의 값이 배열에 오름차순으로 대입됨.
$("요소 선택").each(function() {$(this)})
$.each($("요소 선택"), function(){$(this)})
배열에 저장되 요소의 개수만큼 메서드를 반복 실행 함. 메서드를 실행할 때 마다 $(this)에는 배열에 저장된 요소가 오름차순으로 대입 됨.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script>
$(function(){
var obj = [{
"area":"서울"
}, {
"area":"부산"
}, {
"area":"전주"
}]
$(obj).each(function(i, o){
console.log(i+":", o);
});
console.log("============end1===========");
/*
0: {area: '서울'}
1: {area: '부산'}
2: {area: '전주'} i에 인덱스 값, o에 배열에 저장된 요소 */
$.each($("#menu2 li"), function(i,o){
console.log(i+":", o);
});
console.log("============end2===========");
$.each($("#menu2 li"), function(i){
console.log(i+":", $(this));
});
console.log("=============end3==========");
});
</script>
</head>
<body>
<h1>탐색 연산자</h1>
<ul id="menu1">
<li>내용1-1</li>
<li>내용1-2</li>
<li>내용1-3</li>
</ul>
<ul id="menu2">
<li>내용2-1</li>
<li>내용2-2</li>
<li>내용2-3</li>
</ul>
</body>
</html>
# $.map() / $.grep() 메서드 **
$.map(Array, function(매개변수1, 매개변수2){
return 데이터;
});
배열에 저장된 요소만큼 메서드를 반복 실행함. 메서드가 실행될 때 마다 매개변수1, 매개변수2에는 배열의 데이터와 인덱스 값이 인덱스 오름차순으로 대입 됨. 반환된 데이터는 새 배열에 저장되고 새롭게 가공된 배열 객체를 반환 함.
$.grep(Array, function(매개변수1, 매개변수2){
return [true|false};
});
배열에 저장된 요소만큼 메서드를 반복 실행함. 메서드가 실행될 때 마다 매개변수1, 매개변수2에는 배열에 데이터와 인덱스 정보가 인덱스 오름차순으로 대입 됨. 반환된 데이터가 true 면 인덱스 오름차순으로 데이터를 새 배열에 저장하고 새롭게 가공된 배열 객체를 반환 함.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script>
$(function() {
var arr1 = [{
"area":"서울",
"name":"무대리"
}, {
"area":"부산",
"name":"홍과장"
}, {
"area":"대전",
"name":"박사장"
}, {
"area":"서울",
"name":"빅마마"
}]
var arr2 = $.map(arr1, function(a,b){
if(a.area=="서울"){
return a;
}
});
console.log(arr2);
console.log("==============first end================");
var arr3 = $.grep(arr1, function(a,b){
if(a.area=="서울"){
return true;
} else {
return false;
}
});
console.log(arr3);
console.log("===============second end==============");
});
</script>
</head>
<body>
</body>
</html>
# $.inArray() / $.isArray() / $.merge() 메서드
$.inArray(data, Array, start index)
배열에 저장된 데이터 중 지정한 데이터를 인덱스 오름차순으로 찾아 먼저 찾은 데이터의 인덱스 값을 반환
$.isArray(object)
지정한 객체가 배열 객체면 true, 아니면 false 반환
$.merge(Array1, Array2)
두 배열 객체를 하나의 배열 객체로 묶음
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script>
$(function() {
var arr1 = ["서울", "대전", "대구", "부산"];
var arr2 = ["미국", "한국", "러시아", "중국"];
var obj = {
"name":"정부장",
"area":"서울"
}
var idxNum = $.inArray("부산", arr1);
console.log(idxNum);//3
var okArray1 = $.isArray(arr1);
var okArray2 = $.isArray(obj);
console.log(okArray1);//true
console.log(okArray2);//false
$.merge(arr1, arr2);
console.log(arr1);// ['서울', '대전', '대구', '부산', '미국', '한국', '러시아', '중국']
});
</script>
</head>
<body>
</body>
</html>
# index() 메서드
$("요소선택").index("지정 선택 요소");
지정 선택 요소를 찾아서 인덱스 값 반환
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script>
$(function() {
var idxNum = $("li").index($("#list3"));
console.log(idxNum);//2
});
</script>
</head>
<body>
<h1>배열 관련 함수</h1>
<ul>
<li>내용1-1</li>
<li>내용1-2</li>
<li id="list3">내용1-3</li>
<li>내용1-4</li>
</ul>
</body>
</html>
출처 : doit javascript