고래씌
[jQuery] 10. 추가적인 메소드(each, is 메소드) 본문
■ 모든 html파일에 아래와 같은 style 적용
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>10_추가적인메소드</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<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>
1. each 메소드
- 배열의 모든 인덱스에 순차적으로 접근하고자 할 때, 객체가 가지고 있는 모든 속성에 순차적으로 접근하고자 할 때, 사용하는 forEach함수와 유사하게 수행되는 메소드
[표현법]
1) $.each( 객체/배열 , function(){
// 수행내용
})
2) $(객체/배열.each(function(){
// 수행내용
})
☞ 순차적으로 객체/배열의 인덱스에 접근할 때마다 함수가 실행, 매개변수는 생략 가능
▶ 만약 반복문의 매개변수로 객체를 제시했다면,
- 콜백함수의 첫번째 매개변수로는 순차적으로 접근된 객체의 속성명(키)이 담김
- 두번째 매개변수로는 해당 속성값(밸류)이 담김
▶ 만약 배열을 제시했다면,
- 콜백함수의 첫번째 매개변수로는 순차적으로 접근된 배열의 인덱스가 담김
- 두번째 매개변수로는 해당 인덱스에 담긴 값이 담긴다.
(1) 배열 반복
<script>
$(function(){
const arr = ["민", "고", "래", "푸", "바", "오"];
// 1번째 방법 $.each
$.each(arr, function(index, value){
console.log(`인덱스 : ${index}, 값 : ${value}`);
})
// 2번째 방법 객체/배열.each메소드
// 배열을 $()감싸줘서 배열객체를 jquery객체로 변환
$(arr).each(function(index, value){
console.log(`인덱스 : ${index}, 값 : ${value}`);
})
})
</script>
(2) 객체 반복
<script>
$(function(){
// 객체를 반복시키고자할 때는 $.each 방법만 사용가능
const student = {
name: '홍길동',
age : 20,
address : '서울'
}
$.each(student, function( key, value){
console.log(`속성명 : ${key}, 속성값 : ${value}`)
})
})
</script>
(3) 선택한 여러개의 요소에 순차적으로 접근하고자 할 때
아래 코드를 이용하여 순차적으로 접근해보고자 한다.
<div id="wrap">
<h1>item-1</h1>
<h1>item-2</h1>
<h1>item-3</h1>
<h1>item-4</h1>
<h1>item-5</h1>
</div>
▶ 자바스크립트(js)방식으로 해결
<script>
$(function(){
$("#wrap").children().each(function(index, el){ // el : 순차적으로 접근된 h1 요소 객체
console.log(el); // html 요소 객체가 그대로 담겨져 있음
el.addClass("highlight-"+index); // 에러발생
})
})
</script>
☞ log들을 보면 el에는 순차적으로 접근된 h1 요소 객체인 것을 알 수 있다.
☞ 하지만 이 코드는 에러가 난다....
☞ addClass함수는 jquery 객체에서만 사용가능하기 때문이다.
☞ el이 자바스크립트 방식으로 선택된 요소 객체이기 때문에 문제이다.
▶ 해결방법
<script>
$(function(){
$("#wrap").children().each(function(index, el){ // el : 순차적으로 접근된 h1 요소 객체
console.log(el); // html 요소 객체가 그대로 담겨져 있음
// el.addClass("highlight-"+index);
// 해결방법 1. 자바스크립트 방식으로 해결
// el.className = 'highlight-' + index;
// 해결방법 2. $()로 감싸서 jquery 객체로 변환시켜주기
$(el).addClass('highlight-'+index);
// 해결방법 3. $(this) => 순차적으로 접근되는 해당 요소객체
$(this).addClass('highlight-'+index);
})
})
</script>
☞ $() 으로 감싸서 jquery 객체로 반환해주거나, $(this)를 이용하여 순차적으로 접근하여 해결하는 방법이 있다.
(4) jQuery 방식으로 자바스크립트 방식의 요소객체 바꾸기
<div id="test">안녕하세요</div>
<script>
$(function(){
// js방식
const div = document.getElementById("test");
// js방식으로 스타일 변경
// div.style.backgroundColor = 'pink';
// jquery방식으로 접근
// div.css('backgroundColor','pink');
// => doucment~ js방식으로 값을 가져왔기 때문에 js로 선택한 요소에서는 jquery함수 사용불가. 에러발생
// 이경우에는 $() 감싸줘서 jquery 객체로 변환시켜줘야한다.
$(div).css('backgroundColor','pink');
})
</script>
2. is 메소드
- $("선택자").is("선택자")
- 선택된 요소1가 내가 전달한 전달값(선택자2)와 일치하는지 판단해서 그에 해당하는 논리값을 반환
<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(){
// 현재 반복을 진행중인 요소가 test 클래스를 가지고 있는지 확인 후,
// test클래스를 보유하고 있다면, 배경색을 orange로 변경 / 보유하고 있지 않다면 보라색으로 변경
if( $(this).is('.test')) {
$(this).css("background", "orange");
}else{
$(this).css('background','purple');
}
})
})
</script>
'Front-End > jQuery' 카테고리의 다른 글
| [jQuery] 12. 이벤트(on메소드, 키보드 관련 메소드) (0) | 2023.11.15 |
|---|---|
| [jQuery] 11. 종합응용예시(부트스트랩) (0) | 2023.11.15 |
| [jQuery] 9. 요소생성 및 제거 (0) | 2023.11.15 |
| [jQuery] 8. 영역 관련 메소드(innerHTML속성과 관련된 메소드) (1) | 2023.11.15 |
| [jQuery] 7. 탐색(순회) 메소드 - 동위 (0) | 2023.11.15 |
