[jQuery] 요소 탐색 메서드

728x90

jQuery는 문서의 특정 요소를 선택하거나 탐색할 때 필요한 몇 가지 메서드를 지원하고 있습니다.

(1) filter

filter는 필터선택자를 통해 요소를 선택할 수 있도록 합니다. 필터 선택자에 대해선 아래 글을 참고해 주세요.

아래 예제는 filter메서드를 이용해 다수의 span에서 2번째 요소를 가져와 배경색을 변경합니다.

<!DOCTYPE html>
<html lang="ko">
<head>
	<meta charset="utf-8">
	<title></title>
	<script src="https://code.jquery.com/jquery-3.5.1.js" integrity="sha256-QWo7LDvxbWT2tbbQ97B53yJnYU3WhH/C8ycbRAkjPDc=" crossorigin="anonymous"></script>
	<script>
		$(function () {
			$('span').filter(':eq(1)').css({
				color: 'red'
			});
		});
	</script>
</head>
<body>
	<div>
		<span>자동차</span>
		<span>자전거</span>
		<span>비행기</span>
		<span>배</span>
		<span>오토바이<span>
	</div>
</body>
</html>

또는 다음과 같이 메서드를 추가해 사용할 수도 있습니다.

$(function () {
	$('span').filter(function (index) {
		return index == 1;
	}).css({
		color: 'red'
	});
});

(2) end

end는 문서의 탐색상태를 이전으로 되돌리기 위한 메서드로서 주로 메서드를 연결해 사용하는 메서드체이닝에 많이 사용됩니다.

<!DOCTYPE html>
<html lang="ko">
<head>
	<meta charset="utf-8">
	<title></title>
	<script src="https://code.jquery.com/jquery-3.5.1.js" integrity="sha256-QWo7LDvxbWT2tbbQ97B53yJnYU3WhH/C8ycbRAkjPDc=" crossorigin="anonymous"></script>
	<script>
		$(function () {
			$('span').css('color', 'red').filter(':odd').css('color', 'blue').filter(':even').css('color', 'yellow');
		});
	</script>
</head>
<body>
	<div>
		<span>자동차</span>
		<span>자전거</span>
		<span>비행기</span>
		<span>배</span>
		<span>오토바이<span>
	</div>
</body>
</html>

예제는 span전체에 붉은색을 적용하고 다시 메서드체이닝을 통해 짝수번째 요소에 파란색, 홀수번째 요소에 노란색을 적용하기 위한 시도를 하고 있습니다.

하지만 의도한 것과는 다르게 전체 중에서 두 번째 요소만 노란색으로 변경되었습니다. 이렇게 되는 이유는 메서드체 이닝시에 요소의 범위 때문입니다. 처음에는 모든 요소에 붉은색을 적용하고 그다음 짝수번째 요소에 파란색을 적용하게 되면 그 다음 요소의 선택 범위는 짝수번째에 한정됩니다.

짝수번째 요소가 선택된 상태로 다시 홀수번째를 선택하게 되면 짝수 요소만 골라진 상태에서 홀수번째가 선택되므로 의도한 것과는 다르게 동작하는 것입니다. 이런 경우 전체 요소가 선택된 상태로 거슬로 올라간 뒤 홀수번째 선택이 적용되어야 하는데 이때 end메서드를 사용할 수 있습니다.

$(function () {
	$('span').css('color', 'red').filter(':odd').css('color', 'blue').end().filter(':even').css('color', 'yellow');
});

에제에서 end 메서드는 짝수번째를 선택한뒤 적용되었는데 이렇게 하면 전체 선택 상태로 거슬러 올라가게 되고 자연스럽게 전체 중 홀수를 선택하는 동작이 이루어지게 됩니다.

(3) eq, first, last

위치에 따른 선택메서드입니다. eq는 특정 순번을 지정하며 first와 last는 각각 처음과 마지막 요소를 선택하도록 합니다.

<!DOCTYPE html>
<html lang="ko">
<head>
	<meta charset="utf-8">
	<title></title>
	<script src="https://code.jquery.com/jquery-3.5.1.js" integrity="sha256-QWo7LDvxbWT2tbbQ97B53yJnYU3WhH/C8ycbRAkjPDc=" crossorigin="anonymous"></script>
	<script>
		$(function () {
			$('span').eq(1).css('color', 'red');
			$('span').eq(3).css('color', 'blue');
		});
	</script>
</head>
<body>
	<div>
		<span>자동차</span>
		<span>자전거</span>
		<span>비행기</span>
		<span>배</span>
		<span>오토바이<span>
	</div>
</body>
</html>

참고로 eq에 -값을 지정하면 뒤에서 부터 시작되는 순번을 의미합니다.

(4) add

메서드체이닝을 사용할 때 현재 선택범위를 더 확장하려면 add 메서드를 사용할 수 있습니다.

<!DOCTYPE html>
<html lang="ko">
<head>
	<meta charset="utf-8">
	<title></title>
	<script src="https://code.jquery.com/jquery-3.5.1.js" integrity="sha256-QWo7LDvxbWT2tbbQ97B53yJnYU3WhH/C8ycbRAkjPDc=" crossorigin="anonymous"></script>
	<script>
		$(function () {
			$('span').css('color', 'red').add('p').css('font-size','large');
		});
	</script>
</head>
<body>
	<div>
		<span>자동차</span>
		<span>자전거</span>
		<span>비행기</span>
		<span>배</span>
		<span>오토바이</span>

		<p>123</p>
		<p>456</p>
	</div>
</body>
</html>

예제는 우선 span요소를 선택해 색상을 바꾼 뒤 p요소를 추가적으로 더 선택하도록 하여 font-size를 변경하였습니다. 이렇게 하면 span과 p요소 모두 font-size가 바뀌게 됩니다.

(5) find

문서안에서 특정 태그를 검색하는 데 사용할 수 있습니다.

<!DOCTYPE html>
<html lang="ko">
<head>
	<meta charset="utf-8">
	<title></title>
	<script src="https://code.jquery.com/jquery-3.5.1.js" integrity="sha256-QWo7LDvxbWT2tbbQ97B53yJnYU3WhH/C8ycbRAkjPDc=" crossorigin="anonymous"></script>
	<script>
		$(function () {
			$('div').find('span').each(function (index) {
				$(this).css('color', 'red');
			});
		});
	</script>
</head>
<body>
	<div>
		<span>자동차</span>
		<span>자전거</span>
		<span>비행기</span>
		<span>배</span>
		<span>오토바이</span>
	</div>
</body>
</html>

div안에서 모든 span태그를 찾습니다.

find 메서드는 HTML문서 뿐만 아니라 XML안에서도 검색이 가능합니다.

<!DOCTYPE html>
<html lang="ko">
<head>
	<meta charset="utf-8">
	<title></title>
	<script src="https://code.jquery.com/jquery-3.5.1.js" integrity="sha256-QWo7LDvxbWT2tbbQ97B53yJnYU3WhH/C8ycbRAkjPDc=" crossorigin="anonymous"></script>
	<script>
		$(function () {
			var myxml = $.parseXML("<rss version='2.0'><channel><title>RSS Title</title></channel></rss>");

			var tag = '';
			$(myxml).find('title').each(function(index) {
				tag += '<span>' + $(this).text() + '</span>';
			});

			$('div').html(tag);
		});
	</script>
</head>
<body>
	<div>
		
	</div>
</body>
</html>

예제는 XML중에서 title을 검색해 해당 내용을 추출하여 div내부에 span태그로 출력하도록 하는 것입니다.

(6) is

is는 문서의 요소가 지정한 조건과 동일한 요소인지를 판단하는 메서드입니다.

<!DOCTYPE html>
<html lang="ko">
<head>
	<meta charset="utf-8">
	<title></title>
	<script src="https://code.jquery.com/jquery-3.5.1.js" integrity="sha256-QWo7LDvxbWT2tbbQ97B53yJnYU3WhH/C8ycbRAkjPDc=" crossorigin="anonymous"></script>
	<script>
		$(function () {
			$('div').find('span').each(function (index) {
				if ($(this).is('#target'))
					$(this).css('color', 'red');
			});
		});
	</script>
</head>
<body>
	<div>
		<span>자동차</span>
		<span>자전거</span>
		<span id="target">비행기</span>
		<span>배</span>
		<span>오토바이</span>
	</div>
</body>
</html>

예제를 보면 span에서 비행기에만 id가 지정되어 있습니다. 이 상태에서 jQuery를 통해 span태그를 순환시켜 해당 요소가 target라는 이름을 가지고 있는지를 is메서드로 판단합니다. 그래서 만약 일치하는 요소가 발견되면 스타일을 적용하도록 하였습니다.

728x90

저작자표시 비영리 변경금지

'Web > JQuery' 카테고리의 다른 글

[jQuery] 이벤트 다루기 (0)	2020.06.11
[jQuery] 요소 조작 메서드 (0)	2020.06.07
[jQuery] 객체 합치기 ($.extend) (0)	2020.06.02
[jQuery] 배열처리 (0)	2020.06.02
[jQuery] 선택자 (0)	2020.06.02

'Web > JQuery' 카테고리의 다른 글

티스토리툴바