jQuery: 특정 클래스 이름을 가진 div가 있는지 확인합니다.
jQuery를 사용하여 프로그래밍 방식으로 생성했습니다.div
는 다음과 같습니다.
<div class="mydivclass" id="myid1">Some Text1</div>
<div class="mydivclass" id="myid2">Some Text2</div>
내 코드의 다른 곳에 DIV가 존재하는지 탐지해야 합니다.div의 클래스 이름은 같지만 각 div의 ID가 변경됩니다.jQuery를 사용해서 어떻게 그들을 탐지할 수 있는지 아세요?
다음과 같이 JQuery에서 반환되는 첫 번째 개체를 체크하면 이 작업을 단순화할 수 있습니다.
if ($(".mydivclass")[0]){
// Do something if class exists
} else {
// Do something if class does not exist
}
이 경우 처음에 truthy 값이 있는 경우([0]
)의 인덱스를 작성하면 클래스가 존재한다고 가정합니다.
2013년 4월 10일 편집: 여기에 jsperf 테스트 케이스를 작성했습니다.
사용할 수 있습니다.size()
단, jQuery에서는 다른 함수 호출의 오버헤드를 피하기 위해 길이를 사용할 것을 권장합니다.
$('div.mydivclass').length
그래서:
// since length is zero, it evaluates to false
if ($('div.mydivclass').length) {
갱신하다
선택한 답변은 성능 테스트를 사용하지만 성능의 일부로 요소 선택도 포함하기 때문에 약간 결함이 있습니다. 여기서 테스트하는 것은 아닙니다.업데이트된 성능 테스트는 다음과 같습니다.
http://jsperf.com/check-if-div-exists/3
첫 번째 테스트를 실행한 결과 IMO는 무시할 수 있지만 속성 검색은 인덱스 검색보다 빠릅니다.저는 여전히 더 간결한 조건보다는 코드의 의도에 대해 길이를 사용하는 것이 더 좋습니다.
jQuery 사용 안 함:
네이티브 JavaScript는 항상 고속입니다.이 경우: (예)
if (document.querySelector('.mydivclass') !== null) {
// .. it exists
}
부모 요소에 특정 클래스의 다른 요소가 포함되어 있는지 확인하려면 다음 중 하나를 사용할 수 있습니다.(표준)
var parent = document.querySelector('.parent');
if (parent.querySelector('.child') !== null) {
// .. it exists as a child
}
또는 부모 요소에서 메서드를 사용할 수도 있습니다.(표준)
var parent = document.querySelector('.parent'),
child = document.querySelector('.child');
if (parent.contains(child)) {
// .. it exists as a child
}
마지막으로 특정 요소에 특정 클래스만 포함되어 있는지 확인하려면 다음을 사용합니다.
if (el.classList.contains(className)) {
// .. el contains the class
}
$('div').hasClass('mydivclass')// Returns true if the class exist.
Jquery를 사용하지 않는 솔루션은 다음과 같습니다.
var hasClass = element.classList.contains('class name to search');
// hasClass is boolean
if(hasClass === true)
{
// Class exists
}
참조 링크
아주 간단해...
if ($('.mydivclass').length > 0) {
//do something
}
테스트 방법div
요소를 명시적으로 지정합니다.
if( $('div.mydivclass').length ){...}
간단한 코드는 다음과 같습니다.
if ($('.mydivclass').length > 0) {
//Things to do if class exist
}
특정 ID를 가진 div를 숨기려면:
if ($('#'+given_id+'.mydivclass').length > 0) {
//Things to do if class exist
}
다음은 몇 가지 방법입니다.
1. if($("div").hasClass("mydivclass")){
//Your code
//It returns true if any div has 'mydivclass' name. It is a based on the class name
}
2. if($("#myid1").hasClass("mydivclass")){
//Your code
// It returns true if specific div(myid1) has this class "mydivclass" name.
// It is a based on the specific div id's.
}
3. if($("div[class='mydivclass']").length > 0){
//Your code
// It returns all the divs whose class name is "mydivclass"
// and it's length would be greater than one.
}
요건에 따라 정의된 방법 중 하나를 사용할 수 있습니다.
가장 좋은 방법은 다음과 같이 클래스의 길이를 확인하는 것입니다.
if ($('.myDivClass').length) {
if ($("#myid1").hasClass("mydivclass")){// Do any thing}
Jquery에서는 이렇게 사용할 수 있습니다.
if ($(".className")[0]){
// Do something if class exists
} else {
// Do something if class does not exist
}
JavaScript 사용
if (document.getElementsByClassName("className").length > 0) {
// Do something if class exists
}else{
// Do something if class does not exist......
}
if($(".myClass")[0] != undefined){
// it exists
}else{
// does not exist
}
Javascript에서 가장 좋은 방법:
if (document.getElementsByClassName("search-box").length > 0) {
// do something
}
전체 페이지를 검색하려면 이 옵션을 사용합니다.
if($('*').hasClass('mydivclass')){
// Do Stuff
}
다음은 Javascript 체크 클래스(hasClass)의 매우 샘플 솔루션입니다.
const mydivclass = document.querySelector('.mydivclass');
// if 'hasClass' is exist on 'mydivclass'
if(mydivclass.classList.contains('hasClass')) {
// do something if 'hasClass' is exist.
}
if ($(".mydivclass").size()){
// code here
}
size()
수이 메서드 jQuery의 수)를합니다.이 경우 클래스가 포함된 요소의 수입니다.mydivclass
0을 나타나다다른 숫자를 반환하는 경우 div가 존재해야 합니다.
div가 특정 클래스에 있는지 확인합니다.
if ($(".mydivclass").length > 0) //it exists
{
}
var x = document.getElementsByClassName("class name");
if (x[0]) {
alert('has');
} else {
alert('no has');
}
언급URL : https://stackoverflow.com/questions/5783280/jquery-check-if-div-with-certain-class-name-exists
'source' 카테고리의 다른 글
단일 Amazon RDS 인스턴스에 생성할 수 있는 데이터베이스 수 (0) | 2022.09.12 |
---|---|
Node.js 및 Express를 사용하여 POST할 때 요청 본문에 액세스하는 방법 (0) | 2022.09.12 |
JSP/Java에서 전체 부품과 부분 부품을 더블에서 가져오려면 어떻게 해야 합니까? (0) | 2022.09.12 |
python은 파일에 얼마나 자주 플러시됩니까? (0) | 2022.09.12 |
Java에서 속성 파일 읽기 (0) | 2022.09.12 |