//each()/$.each() 메서드
$("요소 선택").each(function(매개번수1, 매개변수2) {})
$.each($("요소 선택").function(매개번수1, 매개변수2) {})
$("요소 선택").each(function() {$(this)})
$.each($("요소 선택").function() {$(this)})
//예시
$(function(){
var obj = [
{"area":"서울"},
{"area":"부산"},
{"area":"전주"}
];
$(obj).each(function(i, o){ //obj라는 배열을 받아서 i는 인덱스를 의미 0는 배열안에 있는 객체
console.log(i + ":", o);
});
console.log("==== The End 1 ====");
$.each($("#menu2 li"), function(i, o){ //#menu2 li를 받아서 i는 키값 0는 키의 값을 의미
console.log(i + ":", o);
});
console.log("==== The End 2 ====");
$.each($("#menu2 li"), function(i){ //
console.log(i + ":", $(this));
});
});//$.map()/$.grep()메서드
//$.map()메서드는 배열에 저장된 데이터 수만큼 메서드를 반복 실행
//그리고 메서드에 반환된 데이터는 새 배열에 저장되고 그 배열 객체를 반환
//$.grep()메서드는 배열에 저장된 데이터 수만큼 메서드를 반복 실행하면서
//인덱스 오름차순으로 배열의 데이터를 불러옴. 메서드의 반환값이 true면
//데이터가 새 배열에 저장되고 배열을 반환 합니다.
$.map(Array, function(매개변수1, 매개변수2){ //매개변수1에는 해당 배열의 객체가, 매개변수 2에는 해당 배열의 인덱스가 나옴
return 데이터;
});
$.grep()메서드
$.grep(Array, function(매개변수1, 매개변수2){ //매개변수1에는 인덱스가 매개변수2에는 값이들어간다
return[true|false];
});
//예시
<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>//$.inArray()/$.isArray()/$.merge()메서드
//$.inArray() 메서드는 배열에 저장된 데이터 중 지정한 데이터를 찾아 인덱스값을 반환
//$.isArray() 지정한 데이터가 배열 객체면 true를 반환
//$.merge() 두 배열 객체를 하나의 객체로 묶음
//예시
<script>
$(function(){
var arr1 = ["서울", "대전", "부산", "전주"];
var arr2 = ["한국", "미국", "일본", "중국"];
var obj = {
"name":"정부장",
"area":"서울"
}
var idxNum = $.inArray("전주", arr1);//data, Array, start index
console.log(idxNum); //3
var okArray1 = $.isArray(arr1);
var okArray2 = $.isArray(obj);
console.log(okArray1); //true
console.log(okArray2); //false
$.merge(arr2, arr1);
console.log(arr2);
});
</script>//index()메서드
//지정 선택 요소를 찾아서 인덱스값을 반환
$(function(){
var num = $("li").index($("#list3")); //($("#list3"))를 보면 $를 붙여야함
console.log(num);
});
<body>
<ul>
<li>내용1</li>
<li>내용2</li>
<li id="list3">내용3</li> //2
<li>내용4</li>
</ul>
</body>
참고 : 참고 : do it! 자바스크립트 + 제이쿼리 입문(전면 개정판)
반응형
'언어 > WEB' 카테고리의 다른 글
| 모던 자바스크립 16장 프로퍼티 어트리뷰트,17장 생성자 함수에 의한 객체 생성 (0) | 2023.06.08 |
|---|---|
| 언어/JAVAScript모던 자바스크립 12장 스코프 (0) | 2023.06.06 |
| [제이쿼리] 선택자 (1) | 2023.06.01 |
| 모던 자바스크립 12장 함수 (0) | 2023.05.31 |
| 모던 자바스크립 11장 원시 값과 객체 비교 (0) | 2023.05.27 |