JavaScript/jQuery에서 주어진 클래스와 함께 요소가 존재하는지 확인
이 포스트는 JavaScript와 jQuery에서 주어진 클래스에 요소가 존재하는지 확인하는 방법에 대해 논의할 것입니다.
1. jQuery 사용하기
jQuery .hasClass() 메서드는 지정된 클래스가 요소에 할당된 경우 true를 반환합니다. 예를 들어 다음은 div에 다음이 포함된 경우 true를 반환합니다. container 클래스로.
JS
|
1 2 3 4 5 6 7 8 |
$(document).ready(function() { if ($('div').hasClass('container')) { alert('Class exists'); } else { alert('Class does not exist'); } }); |
HTML
|
1 |
<div class="container"></div> |
또 다른 솔루션은 다음을 사용하는 것입니다. 클래스 선택자, 주어진 클래스의 모든 요소를 선택합니다. 다음 프로그램은 클래스가 있는 요소를 찾습니다. container, 클래스를 찾을 수 없을 때 첫 번째 인덱스에서 거짓 값을 반환합니다.
JS
|
1 2 3 4 5 6 7 8 |
$(document).ready(function() { if ($('div.container')[0]) { alert('Class exists'); } else { alert('Class does not exist'); } }); |
HTML
|
1 |
<div class="container"></div> |
또는 더 나은 가독성을 위해 클래스 선택기가 반환한 jQuery 객체의 길이를 확인할 수 있습니다.
JS
|
1 2 3 4 5 6 7 8 |
$(document).ready(function() { if ($('div.container').length) { alert('Class exists'); } else { alert('Class does not exist'); } }); |
HTML
|
1 |
<div class="container"></div> |
2. JavaScript 사용하기
JavaScript를 사용하면 JavaScript의 기본 기능을 사용할 수 있습니다. getElementsByClassName() 기능. 그러나 이것은 클래스의 존재 여부를 판별하지만 클래스에 연결된 요소를 식별하지는 않습니다.
JS
|
1 2 3 4 5 6 |
if (document.getElementsByClassName('container').length) { alert('Class exists'); } else { alert('Class does not exist'); } |
HTML
|
1 |
<div class="container"></div> |
ID로 요소를 타겟팅하려면 querySelector() 기능.
JS
|
1 2 3 4 5 6 |
if (document.querySelector('div.container') !== null) { alert('Class exists'); } else { alert('Class does not exist'); } |
HTML
|
1 |
<div class="container"></div> |
또 다른 그럴듯한 방법은 다음을 사용하는 것입니다. classList 재산 getElementById() 기능.
JS
|
1 2 3 4 5 6 7 |
var div = document.getElementById('outerdiv'); if (div.classList.contains('container')) { alert('Class exists'); } else { alert('Class does not exist'); } |
HTML
|
1 |
<div id="outerdiv" class="container"></div> |
이것은 JavaScript 및 jQuery에서 주어진 클래스와 함께 요소가 존재하는지 여부를 결정하는 것입니다.