제이쿼리 배열 관련 매서드 종류
| 종류 | 사용법 | 설명 |
| each() / $.each() |
$("요소 선택").each(function) #.each($("요소 선택").function) |
배열에 저장된 문서 객체만큼 메서드가 반복 실행됩니다. 배열에 저장된 객체의 순서대로 하나씩 접근하여 객체를 선택하고 인덱스를 구합니다. |
| $.map() | $.map(Aarry.function) | 배열에 저장된 데이터 수만큼 메서드가 반복 실행됩니다. 함수에서 반환된 데이터는 새 배열에 순서대로 저장됩니다. 새로 저장된 배열 객체를 반환합니다. |
| $.grep() | $grep(Aarry.function) | 배열에 저장된 데이터 수만큼 메서드가 반복 실행됩니다. 반환값이 true인 경우에만 배열의 데이터가 인덱스 오름차순으로 새 배열에 저장되며 그 배열을 반환합니다. |
| $.inArray() | $.inArray(data, Array, start index) | 배열 안에서 데이터를 찾습니다. 데이터를 찾으면 가장 맨 앞 데이터의 인덱스를 반환하고, 찾지 못하면 -1을 반환합니다. start index의 값을 지정하면 해당 위치부터 데이터를 찾습니다. |
| $.isArray() | $.isArray(object) | 입력한 객체가 배열 객체라면 true를, 아니면 false를 반환합니다. |
| $.merhe() | $.merge(Array1, Array2) | 인자값으로 입력한 2개의 배열 객체를 하나로 그룹화합니다. |
| index() | $("요소 선택").index("지정 요소 선택") | 선택자로 요소를 먼저 선택합니다. 그런 다음 지정한 요소의 인덱스 정보를 가져옵니다. |
each() / $.each() 메서드
1. $("요소 선택").each(function(매개변수1, 매개변수2) {})
2. $.each($("요소 선택"), function(매개변수1, 매개변수2) {})
3. $("요소 선택").each(function() {$(this)})
4. $.each($("요소선택"), function() {$(this)})
1,2 - 배열에 저장된 요소의 개수만큼 메서드를 반복 실행합니다.
메서드를 실행할 때마다 매개변수1, 매개변수2 에는 배열에 저장된 요소와 인덱스의 값이 배열에 오름차순으로 대입됩니다.
3,4 - 배열에 저장된 요소의 개수만큼 메서드를 반복 실행합니다. 메서드를 실행할 때마다 $(this)에는 배열에 저장된 요소가 오름차순으로 대입됩니다.
<script>
$(function(){
var obj = [{
"area":"서울"
},{
"area":"부산"
},{
"area":"전주"
}]
$(obj).each(function(i,o){
console.log(i + ":",o);
});
console.log("====The End1====");
$.each($("#menu2 li"),function(i,o){
console.log(i + ":",o);
});
console.log("====The End2====");
$.each($("#menu2 li"), function(i){
console.log(i+":",$(this));
});
});
</script>
</head>
<body>
<div id="wrap">
<h1 class="title">탐색 선택자</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>
</div>
</body>인덱스 정보는 콘솔 패널에 출력됩니다.
$.map() / $.grep() 메서드
$.map() 메서드는 배열에 저장된 데이터 수만큼 메서드를 반복 실행합니다.
그리고 메서드에서 반환된 데이터는 새 배열에 저장되고 그 배열 객체를 반환합니다.
$.grep() 메서드는 배열에 저장된 데이터 수만큼 메서드를 반복 실행하며
인덱스 오름차순으로 배열의 데이터를 불러옵니다.
메서드의 반환값이 true면 데이터가 새 배열에 저장되고 배열을 반환합니다.
1. $.map() 메서드
$.map(Array,function(매개변수1, 매개변수2){
return 데이터;
});
배열에 저장된 요소만큼 메서드를 반복 실행합니다.
메서드가 실행될 때마다 매개변수1, 매개변수2에는 배열의 데이터와 인덱스값이 인덱스 오름차순으로 대입됩니다.
반환된 데이터는 새 배열에 저장되고 새로운 배열 객체를 반환합니다.
2. $.grep() 메서드
$.grep(Array, function(매개변수1, 매개변수2){
return [true | false];
});
배열에 저장된 요소만큼 메서드를 반복실행 합니다.
반환된 데이터가 true면 인덱스 오름차순으로 데이터를 새 배열에 저장하고 새로운 배열 객체를 반환합니다.
$(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====");
});매개변수 a,b에 배열의 객체와 인덱스값이 대입됩니다.
객체의 "area" 속성이 "서울" 이면 새 배열에 객체(매개변수 a)를 저장하고 새로운 객체를 반환합니다.
결과는 콘솔패널에 출력되는 것을 확인할 수 있습니다.
$.inArray() / $.isArray() / $.merhe() 메서드
$.inArray(data, Array. start index)
-> 배열에 저장된 데이터 중 지정한 데이터를 찾아 인덱스 값을 반환합니다.
$.isArray(object)
-> 지정한 데이터가 배열 객체면 ture를, 아니면 false를 반환합니다.
$.merhe(Araay1, Array2)
-> 두 배열 객체를 하나의 객체로 묶습니다.
$(function(){
var arr1 = ["빨강", "주황", "노랑", "초록"];
var arr2 = ["파랑", "보라", "검정", "하얀"];
var obj = {
"name" : "장미",
"color" : "빨강"
}
var idxNum = $.inArray("노랑",arr1);
console.log(idxNum);
var okArray1 = $.isArray(arr1);
var okArray2 = $.isArray(obj);
console.log(okArray1); //배열 객체면 ture
console.log(okArray2); //아니면 false
$.merge(arr2,arr1);
console.log(arr2);
});index(0)부터 시작하기 떄문에 노랑은 2가 반환되는것이 맞음.
index() 메서드
$("요소 선택").index("지정 요소 선택")
<script>
$(function(){
var idxNum = $("li").index($("#list3"));
console.log(idxNum); //2
});
</script>
</head>
<body>
<h1>배열 함수</h1>
<ul>
<li>배열1</li>
<li>배열2</li>
<li id="list3">배열3</li>
<li>배열4</li>
</ul>
</body>ul의 자식 요소 중 li#list3 인 요소의 index번호가 콘솔 패널에 출력됩니다.
'IT > jQuery' 카테고리의 다른 글
| [jquery] jquery 콘텐츠 탐색 선택자 (0) | 2020.02.06 |
|---|---|
| [jquery] jquery 속성 탐색 선택자 (0) | 2020.02.05 |
| [jquery] jquery 탐색 선택자 (위치 탐색 선택자) (0) | 2020.02.03 |
| [jquery] jquery 선택자 (형제 선택자) (0) | 2020.02.02 |
| [jquery] jquery 선택자 (인접선택자, 부모요소 선택자, 하위요소 선택자) (0) | 2020.02.01 |
댓글