[제이쿼리] jQuery 배열(array) 메서드

 

제이쿼리 배열 메서드 jQuery Array

---

안녕하세요? 장장스입니다.

제이쿼리 배열 메스드입니다.

 

 

○each()/ $.each 메서드

---

each()/ $.each 메서드는 배열에 저장된 요소를 하나씩 순서대로 선택하면서 인덱스와 값을 가져옵니다.

 

▼javascript

	$(function(){
		var fruit = [
			{"fruit":"사과"},
			{"fruit":"포도"},
			{"fruit":"딸기"}
		];

		$(fruit).each(function(index, obj){
				console.log(index + ":", obj);
		});
		console.log("==== The End 1 ====");

		$.each($("#menu02 li"), function(index, obj){
				console.log(index + ":", obj);
		});
		console.log("==== The End 2 ====");    

		$.each($("#menu02 li"), function(index){
				console.log(index + ":", $(this));
		});    
	});

▼html

<h1>each 배열 메서드</h1>
<ul id="menu01">
	<li>내용1-1</li>
	<li>내용1-2</li>
	<li>내용1-3</li>
</ul>
<ul id="menu02">
	<li>내용2-1</li>
	<li>내용2-2</li>
	<li>내용2-3</li>
</ul>

▼실행결과

 

 

 

○$.map()/ $.grep() 메서드

---

$.map(), $.grep() 메서드는 배열에서 조건에 해당하는 값만 선택할 때 사용 할 수 있습니다. 

 

▼javascript

	$(function(){
		var arr1 = [{
			"name":"사과",
			"color":"빨간색"
			},{
				"name":"포도",
				"color":"보라색" 
			},{
				"name":"딸기",
				"color":"빨간색" 
			},{
				"name":"복숭아",
				"color":"분홍색"
			}];

		var arr2 = $.map(arr1, function(obj, index){
			if(obj.color == "빨간색") {
				return obj;
			}
		});
		console.log(arr2);
		console.log("==== first End ====");


		var arr3 = $.grep(arr1, function(obj, index){
			if(obj.color == "빨간색") {
				return true;
			} else {
				return false;
			}
		});
		console.log(arr3);
		console.log("==== Second End ====");    
	});

▼실행결과

 

 

 

 

 

○$.inArray()/$.isArray()/$.merge() 메서드

---

inArray()는 배열에 해당 값이 있는지 확인하여 인덱스를 반환합니다. 값이 없으면 -1을 반환합니다.

isArray()는 배열 여부를 확인하여 Boolean값을 반환합니다.

merge() 메서드는 배열을 하나로 연결하여 반환합니다.

 

▼javascript

	$(function(){
		var arr1 = ["서울", "인천", "부산", "전주"];
		var arr2 = ["한국", "미국", "영국", "태국"];
		var obj = {
			"name":"장장스", 
			"area":"이태원 클라쓰"
		}
		
		var idxNum = $.inArray("부산", arr1);
		console.log("부산의 index: "+idxNum);

		var okArray1 = $.isArray(arr1);
		var okArray2 = $.isArray(obj);
		console.log("arr1 배열여부: "+okArray1);
		console.log("obj  배열여부: "+okArray2);

		$.merge(arr2, arr1);
		console.log("arr2에 arr1을 merge");
		console.log(arr2);
	});

 

▼실행결과

 

 

 

 

Post

---

• jQuery 콘텐츠 탐색 선택자(selector)
• jQuery 속성 탐색 선택자(selector)
• jQuery 위치 탐색 선택자(selector)
• jQuery 인접 관계 선택자(selector)
• jQuery 직접 선택자(selector)

References

---

• 생활코딩: 선택자
• w3schools
• TCP school

 

 

---

잘못된 코드나 내용이 있다면 댓글을 남겨주세요. 즉시 수정하도록 하겠습니다! :)