HOWTO · jQuery
jQuery: 데이터 속성으로 요소 찾기
jQuery를 사용하여 데이터 속성이 있는 요소를 검색하려면 find() 메서드, filter() 메서드 또는 CSS 속성 선택기를 사용할 수 있습니다. 이 문서에서는 실용적인 코드 예제를 사용하여 모두 사용하는 방법을 알려줍니다.
이 페이지의 내용
jQuery를 사용하여 데이터 속성이 있는 요소를 검색하려면 .find() 메서드, .filter() 메서드 또는 CSS 속성 선택기를 사용할 수 있습니다. 이 문서에서는 실용적인 코드 예제를 사용하여 모두 사용하는 방법을 알려줍니다.
jQuery .find() 메서드를 사용하여 데이터 속성 찾기
jQuery에서 .find() 메서드를 사용하면 CSS 선택기를 사용하여 웹 페이지에서 요소를 검색할 수 있습니다. 여기에서 올바른 CSS 선택기를 작성하면 데이터 속성을 찾는 데 사용할 수 있습니다.
여기에서 CSS 선택기와 일치하는 요소로 원하는 작업을 수행할 수 있습니다. 아래 예에서는 data-name=Edison을 검색하고 글꼴 크기를 3em으로 변경했습니다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>01-jQuery-find-data-attr</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.1/jquery.min.js" integrity="sha512-aVKKRRi/Q/YV+4mjoKBsE4x3H+BkegoM/em46NNlCqNTmUYADjBbeNefNxYV7giUp0VxICtqdrbqU7iVaeZNXA==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
</head>
<body>
<main>
<ul>
<li data-name="Edison">Thomas Edison</li>
<li data-name="Einstein">Albert Einstein</li>
<li data-name="Rutherford">Ernest Rutherford</li>
</ul>
</main>
<script>
$(document).ready(function() {
$("ul").find("[data-name='Edison']").css('font-size', '3em');
});
</script>
</body>
</html>
출력:
CSS 속성 선택기를 사용하여 데이터 속성 찾기
CSS 속성 선택기를 사용하여 데이터 속성을 찾을 수 있습니다. 그러나 HTML 마크업에 따라 이를 수행하는 두 가지 방법이 있습니다.
아래 첫 번째 예에서 목록 항목에는 데이터 속성이 있습니다. 따라서 태그 선택기와 CSS 속성 선택기로 구성된 CSS 자손 선택기를 사용할 수 있습니다.
결과는 필수 요소의 정확한 일치이며 나중에 CSS 스타일을 적용할 수 있습니다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>02-jQuery-find-data-attr</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.1/jquery.min.js" integrity="sha512-aVKKRRi/Q/YV+4mjoKBsE4x3H+BkegoM/em46NNlCqNTmUYADjBbeNefNxYV7giUp0VxICtqdrbqU7iVaeZNXA==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<style>
body {
font-family: "Trebuchet MS", Verdana, sans-serif;
font-size: 1.2em;
}
</style>
</head>
<body>
<main>
<ul>
<li data-iso="MRT">Mauritania</li>
<li data-iso="LUX">Luxembourg</li>
<li data-iso="HRV">Croatia</li>
</ul>
</main>
<script>
$(document).ready(function() {
$("ul [data-iso='MRT'").css('color', 'magenta');
});
</script>
</body>
</html>
출력:
아래의 두 번째 예에는 다른 HTML 및 jQuery 코드가 있습니다. 첫째, 상위 <ul> 요소는 HTML에서 데이터 속성을 가집니다.
이는 마지막 예제의 이전 선택기가 작동하지 않음을 의미합니다. 이를 해결하기 위해 <ul> 요소와 CSS 속성 선택자 사이의 공백을 제거할 수 있습니다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>02_01-jQuery-find-data-attr</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.1/jquery.min.js" integrity="sha512-aVKKRRi/Q/YV+4mjoKBsE4x3H+BkegoM/em46NNlCqNTmUYADjBbeNefNxYV7giUp0VxICtqdrbqU7iVaeZNXA==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
</head>
<body>
<main>
<ul data-viruses="computer-viruses">
<li>Mydoom</li>
<li>ILOVEYOU</li>
<li>WannaCry</li>
</ul>
</main>
<script>
$(document).ready(function() {
$("ul[data-viruses='computer-viruses']").css('font-style', 'italic');
});
</script>
</body>
</html>
출력:
.filter() 메소드를 사용하여 데이터 속성 찾기
.filter() 메서드는 CSS 선택기를 사용하여 HTML 요소를 일치시킵니다. 이를 통해 요소의 CSS 선택기를 전달하고 결과로 작업할 수 있습니다.
이것이 아래 코드 예제에서 수행한 작업입니다. 이전 예제와 달리 jQuery .addClass() 메서드를 사용하여 CSS 클래스를 추가합니다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>03-jQuery-find-data-attr</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.1/jquery.min.js" integrity="sha512-aVKKRRi/Q/YV+4mjoKBsE4x3H+BkegoM/em46NNlCqNTmUYADjBbeNefNxYV7giUp0VxICtqdrbqU7iVaeZNXA==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<style>
.style-chef {
background-color: #1a1a1a;
color: #ffffff;
padding: 0.2em;
width: 40%;
}
</style>
</head>
<body>
<main>
<ul>
<li data-esolang="Befunge">Befunge</li>
<li data-esolang="Chef">Chef</li>
<li data-esolang="Whitespace">Whitespace</li>
</ul>
</main>
<script>
$(document).ready(function() {
$("li").filter('[data-esolang="Chef"]').addClass('style-chef');
});
</script>
</body>
</html>
출력:
