each 메소드
•
배열의 모든 인덱스에 순차적으로 접근하고자 할 때,
객체가 가지고 있는 모든 속성에 순차적으로 접근하고자 할 때 사용
•
for in문과 유사하게 수행되는 메소드
•
표현법
1.
$.each(객체|배열, function([매개변수1, 매개변수2]){
순차적으로 접근해서 실행할 내용;
});
2.
객체|배열.each(function([매개변수1, 매개변수2]){
순차적으로 접근해서 실행할 내용;
});
•
만약 객체를 제시했다면,
첫번째 매개변수에는 순차적으로 접근된 객체의 속성명(키 값)이 담김
두번째 매개변수에는 해당 속성값(밸류)이 담김
•
만약 배열을 제시했다면,
첫번째 매개변수에는 순차적적으로 접근된 배열의 인덱스수가 담김
두번째 매개변수에는 해당 인덱스값이 담김
<div id="area1"></div>
<script>
$(function(){
var arr = ["강", "남", "하", "동"];
/*for(var i in arr){}*/
/*
$.each(arr, function(index, value){
console.log("인덱스 : " + index + ", 값 : " + value);
})
*/
$(arr).each(function(index, value){ // 배열에 $로 감싸면 제이쿼리 문구(?)로 만들어짐 감싸지않으면 오류,,
console.log("인덱스 : " + index + ", 값 : " + value);
});
// 객체배열 만들기
var student = {
name:"홍길동",
age:20,
address:"서울"
};
$.each(student, function(key, value){
console.log("속성명 : " + key + ", 속성값 : " + value);
});
// 객체배열 만들기
var links = [{name:"네이버", link:"http://www.naver.com"},
{name:"구글", link:"http://www.google.com"},
{name:"다음", link:"http://www.daum.net"}];
var output = "";
// <a href="xxxxx">xxx</a>
$.each(links, function(index, item){
output += "<a href='" + item.link + "'>" + item.name + "</a><br>";
})
$("#area1").html(output);
})
</script>
JavaScript
복사
<div id="wrap">
<h1>item-1</h1>
<h1>item-2</h1>
<h1>item-3</h1>
<h1>item-4</h1>
<h1>item-5</h1>
</div>
<script>
$(function(){
// [h1, h1, h1, ...]
$("#wrap").children().each(function(index, el){ // el : 순차적으로 접근된 h1요소객체
//console.log(el); // <h1> 태그까지 담겨있음
//el.addClass("highlight-" + index); // 오류
// el : javaScript방식으로 선택된 요소객체가 담기게 됨! (즉, 직접 속성에 접근해서 값 변경)
//el.className = "highlight-" + index; // --> 제대로 실행됨
// 자바스크립트 --> jQuery
// $(el).addClass("highlight-" + index); // --> 제대로 실행됨
// 간편한 방법 (매개변수 사용X)
// $(this) : 순차적으로 접근되는 해당 요소객체
$(this).addClass("highlight-" + index);
})
})
</script>
JavaScript
복사
is 메소드
•
$("선택자").is("선택자")
•
선택된 요소가 내가 전달한 전달값과 일치하는지 판단해서
그에 해당하는 논리값(true/false) 반환
<h3 class="test">test1</h3>
<h3>test2</h3>
<h3 class="test">test3</h3>
<h3 class="test">test4</h3>
<h3>test5</h3>
<h3 class="test">test6</h3>
<script>
$(function(){
$("h3").each(function(){
// 현재 순차적으로 접근하는 h3요소가 test클래스를 가지고 있을 경우 => 배경색 변경
if($(this).is(".test")){
$(this).css("backgroundColor", "orange");
}else{
$(this).css("backgroundColor", "purple");
}
})
})
</script>
JavaScript
복사
