jQuery Traversing
- jQuery의 탐색(순회)
- 1차적으로 선택자에 의해 찾은 요소들을 다시 2차 필터링 하거나 새로운 요소를 추가할때에는 traverse관련 메소드를 사용
filtering
- 선택자로 지정한 객체 그룹에서 위치를 기준으로 객체 선택을 하는 메소드
first()
- 선택된 요소중 가장 첫번째 요소 리턴
last()
- 선택된 요소 중 가장 마지막 요소를 리턴
eq(index)
- 인덱스 번호와 일치하는 요소를 리턴 (0부터 시작)
filter()
- 인자값과 일치하는 요소만 리턴
- filter 메소드는 2가지 형태로 사용
- $(selector).filter(selector);
- $(selector).filter(function( [index] ){ });
- 1차에 선택된 수만큼 함수를 반복하여 호출(각 요소를 가지고 호출)
- 함수 정의 시 매개 변수를 작성하면 index번호를 매개변수로 넘겨줌
not()
- 인자값과 일치하진 않는 요소만 리턴
EX) first, last, eq, filter, not
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="https://code.jquery.com/jquery-3.6.0.js" integrity="sha256-H+K7U5CnXl1h5ywQfKtSj8PCmoN9aaq30gDh27Xc0jk=" crossorigin="anonymous"></script>
</head>
<body>
<p class="test1">1. 테스트</p>
<p class="test2">2. 테스트</p>
<p class="test1">3. 테스트</p>
<p class="test2">4. 테스트</p>
<p class="test1">5. 테스트</p>
<p class="test2">6. 테스트</p>
<div class="test1">7. 테스트</div>
<button id="btn">확인</button>
<script>
$('#btn').click(function() {
var $test2 = $('.test2');
$test2.first().css('color', 'red');
$test2.last().css('color', 'blue');
$test2.eq(1).css('color', 'yellow');
var $p = $('p');
$p.filter(':even').css('color', 'purple');
$p.filter(function(index) {
if ((index % 2) == 0) {
$(this).css('color', 'blue');
} else {
$(this).css('color', 'red');
}
});
$p.not('.test1').css('color', 'skyblue');
});
</script>
</body></html>Ancestors
- 선택된 요소의 상위 요소들을 선택할 수 있는 메소드
- 자식 요소가 부모 요소를 선택
parent()
- 선택된 요소의 바로 위(상위요소)만 리턴
parents( [인자] )
- 선택된 요소의 모든 상위 요소 리턴
- 매개변수가 있으면 매개변수와 일치하는 부모들만 리턴
preaentsUntil( [인자] )
- 선택된 요소부터 인자 요소까지 범위의 모든 상위요소 리턴
(선택된 요소 인자 요소 제외)
EX) parent, parents, preaentsUntil
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>parent, parents, parentuntil</title>
<script src="https://code.jquery.com/jquery-3.5.1.js" integrity="sha256-QWo7LDvxbWT2tbbQ97B53yJnYU3WhH/C8ycbRAkjPDc=" crossorigin="anonymous"></script>
</head>
<body>
<div class="ancestors">
<div style="width:500px;" id="div1">
i'm div (great-grandparent)
<ul>
i'm ul (grandparent)
<li>
i'm li (direct parent)
<span id="span1">span</span>
</li>
</ul>
</div>
<div style="width:500px;" id="div2">
div (grandparent)
<p>
p(direct parent)
<span id="span2">span</span>
</p>
</div>
</div>
<button id="btn">확인</button>
<script>
$('#btn').click(function() {
var $selector = $('span');
// 자기꺼가 없는 경우 부모에 속성값 상속
// 있으면 유지
$selector.css('color', 'red');
$selector.parent().css('color', 'blue');
$selector.parent().parent().css('color', 'pink');
var $span2 = $('#span2');
$span2.parents('#div2').css('border', '1px solid red');
console.log($span2.parents('#div2'));
var $span1 = $('#span1')
$span1.parentsUntil('#div1').css('border', '1px solid red');
console.log($span1.parentsUntil('#div1'));
});
</script>
</body></html>Descendants
- 선택된 요소의 하위 요소들을 선택할 수 있는 메소드
children([인자])
- 선택된 요소의 모든 자손(다음레벨) 객체를 리턴
- 선택된 요소의 인자와 일치하는 자손(다음레벨) 객체 리턴
find(인자)
- 선택된 요소의 인자와 일치하는 모든 후손 (모든 레벨) 객체 리턴
siblings([인자])
- 같은 레벨에 있는 요소(형제)를 선택할 수 있는 메소드
- 인자값을 넣지 않으면 모든 형제를 의미
- 같은 레벨에 있는 요소(형제) 중 인자와 일치하는 요소 리턴
next()
- 선택된 요소의 같은 레벨(형제)들 중 선택된 요소 다음의 한 개 요소를 리턴
nextAll()
- 선택된 요소의 같은 레벨(형제)들 중 선택된 요소 다음의 모든 요소를 리턴
nextUntil(인자)
- 선택된 요소부터 같은 레벨(형제) 들 중 인자까지 범위의 모든 요소를 리턴
(인자값 제외)
prev()
- 선택된 요소의 같은 레벨(형제)들 중 선택된 요소 이전의 한 개 요소를 리턴
prevAll()
- 선택된 요소의 같은 레벨(형제)들 중 선택된 요소 이전의 모든 요소를 리턴
prevUntil(인자)
- 선택된 요소의 같은 레벨(형제)들 중 이전 요소들 중에서 인자값 전까지의 요소를 선택
(인자값 제외)
is(인자)
- 선택된 요소의 범위내에 인자와 동일한 요소가 있는지 찾음
(있으면 true, 없으면 false)
EX) is
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="https://code.jquery.com/jquery-3.5.1.js" integrity="sha256-QWo7LDvxbWT2tbbQ97B53yJnYU3WhH/C8ycbRAkjPDc=" crossorigin="anonymous"></script>
</head>
<body>
<h3>test1</h3>
<h3>test2</h3>
<h3>test3</h3>
<h3>test4</h3>
<h3>test5</h3>
<h3>test6</h3>
<button id="btn">확인</button>
<script>
$('#btn').click(function() {
var $selector = $('h3');
if ($selector.is('.hh')) {
$selector.css('color', 'red');
$selector.removeClass('hh');
} else {
$selector.css('color', 'blue');
$selector.addClass('hh');
}
});
</script>
</body></html>
개발자로 매일 한 걸음