jQuery에서 여러 클래스 선택
이 기사에서는 jQuery에서 여러 클래스를 선택하는 두 가지 방법을 설명합니다. 두 메서드 모두 클래스가 있는 요소와 일치하지만 다르게 수행합니다.
게다가 성능을 포함하면 하나가 다른 것보다 빠릅니다.
jQuery에서 여러 클래스 선택: 클래스 교차 접근 방식
클래스 교차 방식을 사용하여 jQuery에서 여러 클래스를 선택할 수 있습니다. 여기에서 jQuery 선택기를 사용하여 클래스 사이에 공백 없이 클래스를 가져옵니다.
또한 클래스를 작성하는 순서는 중요하지 않습니다. 다음 코드에는 두 개의 클래스가 있는 HTML 요소가 있습니다. class-1 및 class-2.
그런 다음 클래스 교차 접근 방식을 사용하여 두 클래스를 모두 가져옵니다. 너가 원하는 것을 할수있어; 여기에서 글꼴 크기를 변경했습니다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>01-jQuery-select-multiple-classes</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>
<div class="class-1 class-2">
<p>I am a random text.</p>
</div>
</main>
<script>
$('.class-1.class-2').css("font-size", "3em")
</script>
</body>
</html>
출력:
jQuery에서 여러 클래스 선택: filter() 함수 사용
요소에 두 개의 클래스(예: class-a 및 class-b)가 있는 경우 filter() 함수를 사용하여 선택할 수 있습니다. 먼저 jQuery 선택기를 사용하여 class-a를 선택한 다음 filter() 함수를 사용하여 class-b를 선택합니다.
이 방법으로 jQuery는 class-a가 있는 모든 요소를 선택하고 class-b가 있는 요소를 제외한 모든 요소를 제거합니다.
결과는 class-a 및 class-b가 있는 요소입니다. 그것이 우리가 다음 코드에서 한 일입니다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>02-jQuery-select-multiple-classes</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>
<div class="class-a class-b">
<p>Hello World</p>
</div>
</main>
<script>
$('.class-a.class-b').css("padding", "3em")
</script>
</body>
</html>
출력:
Habdul Hazeez is a technical writer with amazing research skills. He can connect the dots, and make sense of data that are scattered across different media.
LinkedIn