[JQuery] 배열

1. 배열 $.each() - index, value

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<script src="http://code.jquery.com/jquery-1.12.4.min.js"></script>
<script src="http://code.jquery.com/jquery-migrate-1.4.1.min.js"></script>

<script>
	var city = ["서울","대전","대구","부산"];


$.each(city, function(index, value){
		document.write(index+" : "+value+"<br>");
	});

	// javascript 반복문 
	for(i=0; i<city.length; i++){
		document.write(i+" : "+city[i]+"<br>");
	}
</script>

결과

 

2. 배열 $.each() - key, value

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<script src="http://code.jquery.com/jquery-1.12.4.min.js"></script>
<script src="http://code.jquery.com/jquery-migrate-1.4.1.min.js"></script>

<script>
	var info = {
		subject : "제목",
		comment : "내용",
		hit : 3
	};
	
	$.each(info, function(key, value){
		document.write(key + " : "+value+"<br>");
	});

	// 향상된 for문 
	for (var key in info) {
		document.write(key+" : "+info[key]+"<br>");
	}
</script>

결과

결과

 

3. 배열 $(selector).each()

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<script src="http://code.jquery.com/jquery-1.12.4.min.js"></script>
<script src="http://code.jquery.com/jquery-migrate-1.4.1.min.js"></script>

<script>
	$(document).ready(function(){
		$("div").each(function(index, element){
			console.log(index); //index 값
			console.log(element); //문자열 내용
			//console.log($(this).attr("class")); //class 이름
		})
	});
</script>

<div class="m1">내용1</div>
<div class="m2">내용2</div>
<div class="m3">내용3</div>

결과

4. 배열 $.map()

$.map() 메서드는 $.each() 메서드와 동일한 기능을 가지고 있다. 

 

차이점은 매개 변수의 순서가 서로 반대이며, $.map() 메서드의 경우 기존의 배열을 이용하여 새로운 배열( 예를 들어 조건문을 이용해서 출력문의 배열을 재정렬 )을 만들 수 있지만, $.each() 메서드는 만들 수 없다. 

 

* 수정,추가 부분에서 .map() 메서드 대신 .each() 메서드를 사용하면 조건문을 무시 return 실행되어 배열을 그대로 출력된다. 

 

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<script src="http://code.jquery.com/jquery-1.12.4.min.js"></script>
<script src="http://code.jquery.com/jquery-migrate-1.4.1.min.js"></script>

<script>
	var city = ["서울","대전","대구","부산"];	
	
	$.each(city, function(index, value){
		document.write(index+" : "+value+"<br>");
	});
	
	$.map(city, function(index, value){ //매개 변수의 순서가 서로 반대
		document.write(index+" : "+value+"<br>");
	});
</script>

 

결과

 

[수정,추가]

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<script src="http://code.jquery.com/jquery-1.12.4.min.js"></script>
<script src="http://code.jquery.com/jquery-migrate-1.4.1.min.js"></script>

<script>
	$(document).ready(function(){
		var city = ["서울","대전","대구","부산"];	
		
		var newcity = $.map(city, function(value, index){ //변수 순서 반대로 정렬
			if(index < 2){ //map() 메서드 일때만 실행
				return value;
			}			
		});
		
		document.write(newcity.toString());
	});
</script>

결과