jQuery의 추가적인 메소드에 대해 알아보자
each 메소드
✔️ 배열의 모든 인덱스에 순차적으로 접근하고자 할 때, 객체가 가지고 있는 모든 속성에 순차적으로 접근하고자 할 때
사용하는 반복문 (for in문)과 유사하게 수행되는 메소드
[ 표현법 ]
1)
$.each(배열/객체, function(매개변수1, 매개변수2) {
순차적으로 접근해서 반복적으로 수행할 코드;
});
2)
배열.each(function(매개변수1, 매개변수2) {
순차적으로 접근해서 반복적으로 수행할 코드;
});
순차적으로 객체 또는 배열의 인덱스에 접근할 때마다 익명함수가 실행됨
매개변수1, 매개변수2가 내부적으로 실행될 때마다 전달됨 (매개변수 생략 가능)
만약 객체를 제시했다면,
매개변수1(index): 순차적으로 접근된 객체의 "속성명(키값)"이 담겨 옴
매개변수2(value): 순차적으로 접근된 객체의 해당 속성명에 해당하는 "속성값(밸류값)"이 담겨 옴
만약 배열을 제시했다면,
매개변수1(key): 순차적으로 접근된 배열의 "인덱스 수"가 담겨 옴
매개변수2(value): 순차적으로 접근된 배열의 해당 인덱스에 해당하는 "값"이 담겨 옴
📍 매개변수 이름은 그냥 의미 부여해서 대표적으로 쓰이는 거 넣었을 뿐임!
<script>
$(function() { // 모든 요소가 흩뿌려지고 나서 자동으로 한 번 실행되게 하기 위해 '$(function(){})' 사용
// 배열의 제시하는 경우
var arr = ["김", "유", "저", "짱"];
for(var i in arr) { // i: 0에서부터 마지막 인덱스까지 담김
console.log("인덱스: " + i + ", 값: " + arr[i]);
}
console.log("==============================");
// each 메소드 사용
// 1) $.each();
$.each(arr, function(index, value){
// console.log("반복 실행됨");
console.log("인덱스: " + index + ", 값: " + value);
});
console.log("==============================");
// 2) 배열.each();
/*
arr.each(function(index, value) {
console.log("인덱스: " + index + ", 값: " + value);
});
*/
// Uncaught TypeError: arr.each is not a function at HTMLDocument.<anonymous>
// '순수 자바스크립 구문 중에 each라는 건 없는데?'라는 뜻
// arr.each() 에서 arr은 JavaScript 형식, each()는 jQuery에서 사용하는 형식
// 혼합해서 쓸 수는 있지만 적어도 한 줄에서는 통일시켜 줘야 함! 즉, arr.each() 안 됨!
// arr을 jQuery화 시켜 주면 됨!
$(arr).each(function(index, value) { // arr을 $ 표시로 감싸 주기만 하면 됨!
console.log("인덱스: " + index + ", 값: " + value);
});
console.log("=============== 배열 끝 ===============");
// 객체를 제시하는 경우
var student = {
name : "홍길동",
age: 20,
address : "서울"
};
// for in문
/*
for(var key in student) { // key: 객체의 속성명
console.log("속성명: " + key + ", 속성값: " + student.key);
}
*/
// 속성명: name, 속성값: undefined 등 속성명은 잘 나오지만 속성값은 undefined!
// 위와 같이 .으로 표현하면 student의 key라는 속성을 찾으려 하기 때문에 대괄호로 접근해 줘야 함!
for(var key in student) { // key: 객체의 속성명
console.log("속성명: " + key + ", 속성값: " + student[key]);
}
console.log("==============================");
// each 메소드 사용
// 1) $.each();
$.each(student, function(key, value){
console.log("속성명: " + key + "속성값: " + value);
});
console.log("==============================");
// 2) 객체.each(); 는 사용 불가
$(student).each(function(key, value){
console.log("속성명: " + key + ", 속성값: " + value);
});
// student.each is not a function at HTMLDocument.
// 자바스크립트에는 each라는 거 없는데? 라는 뜻
// 그래서 배열 때처럼 $로 감싸 줬더니 => 속성명: 0, 속성값: [object Object]
// 실행은 되는데 반복이 안 됨!
// 즉, 객체에서는 each(); 사용 불가!
});
</script>
객체 배열을 제시하는 경우
<div id="area1"></div>
<script>
$(function() {
// 객체 배열을 제시하는 경우
var links = [{name: "네이버", link : "http://www.naver.com"},
{name: "구글", link : "http://www.google.com"},
{name: "다음", link : "http://www.daum.net"}];
var output = "";
// <a href="xxx">xxxxx</a>
$.each(links, function(index, item){ // 객체 자체가 item에 들어간 것
output += "<a href='" + item.link + "'>" + item.name + "</a> <br>";
});
$("#area1").html(output);
});
</script>
대표적으로 each 메소드를 쓰는 경우: 선택된 여러 개의 요소에 순차적으로 접근할 때
<head>
<style>
.highlight-0 { background-color : red; }
.highlight-1 { background-color: orange; }
.highlight-2 { background-color : yellow; }
.highlight-3 { background-color: green; }
.highlight-4 { background-color: blue; }
</style>
</head>
<body>
<div id="wrap">
<!-- h1{item-$}*5 + Enter -->
<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, h1, h1]
$("#wrap").children().each(function(index, el) { // el: 순차적으로 접근된 h1 요소 객체
// console.log(el); // 요소 객체가 그대로 담겨져 있는 것 확인 가능
// el.addClass("highlight-" + index);
// el.addClass is not a function => 클래스가 제대로 부여되지 않음
// el은 자바스크립트 방식으로 선택된 요소 객체, addClass는 제이쿼리 메소드이기 때문에 호환 안 되는 것!
// 해결방법 1 : el에 맞추기 => 자바스크립트 방식으로 클래스명 부여
// el.className = "highlight-" + index;
// 해결방법 2: addClass() 메소드에 맞추기 => jQuery 방식으로 클래스명 부여(el을 $로 감싸 주기)
// $(el).addClass("highlight-" + index);
// 해결방법3: $(this)를 이용하는 방법 => 순차적으로 접근되는 해당 요소 객체 (매개변수 el이 없어도 됨)
$(this).addClass("highlight-" + index);
});
})
</script>
</body>
jQuery 방식으로 자바스크립트 방식의 요소 객체 바꿔 보기
<div id="test">
안녕하세요
</div>
<script>
$(function() {
// 자바스크립트 방식으로 요소 가져오기
var div = document.getElementById("test");
// 자바스크립트 방식으로 직접 접근
// div.style.backgroundColor = "pink"; // 스타일 적용됨
// jQuery 방식으로 접근 (메소드 호출)
// div.css("backgroundColor", "pink"); // 스타일 적용 안 됨
// 이 경우에는 $()로 감싸 줌
$(div).css("backgroundColor", "pink");
});
</script>
is 메소드
✔️ 선택된 요소가 내가 전달한 전달값과 일치하는지 판단해서 그에 해당하는 논리값 (true/false) 리턴
👉🏻 $("선택자").is("선택자")
<!-- h3[class=test]{test$}*6 + Enter -->
<h3 class="test">test1</h3>
<h3 class="test">test2</h3>
<h3 class="test">test3</h3>
<h3 class="test">test4</h3>
<h3>test5</h3>
<h3 class="test">test6</h3>
<script>
$(function() {
// [h3, h3, h3, h3, h3, h3]
$("h3").each(function() {
// 현재 순차적으로 접근하는 h3 요소가 test 클래스를 가지고 있는지 검사
// each 메소드상에서 현재 순차적으로 접근하는 요소 == $(this)
// 만약 test 클래스를 가지고 있다면: 배경색을 오렌지색으로
// 있지 않다면: 배경색을 보라색으로
if($(this).is(".test")) {
$(this).css("backgroundColor", "orange");
} else {
$(this).css("backgroundColor", "purple");
}
});
});
</script>