jQuery : 특정 클래스 이름의 div가 있는지 확인하십시오.


235

jQuery를 사용하여 프로그래밍 방식으로 div다음과 같은 여러 가지를 생성하고 있습니다 .

<div class="mydivclass" id="myid1">Some Text1</div>
<div class="mydivclass" id="myid2">Some Text2</div>

내 코드 어딘가에 이러한 DIV가 있는지 감지해야합니다. div의 클래스 이름은 동일하지만 각 div마다 ID가 변경됩니다. jQuery를 사용하여 감지하는 방법에 대한 아이디어가 있습니까?

답변:


424

JQuery에서 반환 된 첫 번째 객체를 확인하여이를 단순화 할 수 있습니다.

if ($(".mydivclass")[0]){
    // Do something if class exists
} else {
    // Do something if class does not exist
}

이 경우 첫 번째 ( [0]) 색인에 값이 참 이면 클래스가 있다고 가정하십시오.

편집 2013년 4월 10일 : 나는 jsperf 테스트 케이스를 만들었습니다 여기에 .


좋은 지적은 둘 다 단지 속성 조회 일뿐입니다. 나는 네 캐릭터에 관심이 없지만 상황에 따라 더 명확 할 수 있습니다 ...
TJ Crowder

작동하는 다른 솔루션이 있지만이 솔루션을 사용하게되었습니다. 빠른 답변 감사합니다.
아바타

1
흥미롭게도, :first거기에 던지면 성능에 도움이 될 것이라고 생각할 수도 있지만 (@itgorilla의 성능이 중요한 기준인지 여부는 알지 못하지만) jQuery가 할 수있는 기본 기능을 변경하기 때문에 브라우저에 따라 크게 달라질 수 있습니다. 선택. div가 존재하는 테스트 케이스존재하지 않는 테스트 케이스가 있습니다 .
TJ Crowder

그리고 클래스가 존재하지 않으면 코드를 실행하고 싶지 않다면?
Thomas Sebastian

1
@ThomasSebastian Tryif (!$(".mydivclass")[0]){ /* do stuff */ }
Shaz

117

을 사용할 수 size()있지만 jQuery는 다른 함수 호출의 오버 헤드를 피하기 위해 길이를 사용하는 것이 좋습니다.

$('div.mydivclass').length

그래서:

// since length is zero, it evaluates to false
if ($('div.mydivclass').length) {

http://api.jquery.com/size/

http://api.jquery.com/length/

최신 정보

선택된 답변은 perf 테스트를 사용하지만 perf의 일부로 요소 선택도 포함되어 있기 때문에 약간의 결함이 있습니다. 여기서는 테스트되지 않습니다. 업데이트 된 성능 테스트는 다음과 같습니다.

http://jsperf.com/check-if-div-exists/3

테스트의 첫 번째 실행은 속성 검색이 인덱스 검색보다 빠르다는 것을 보여 주지만 IMO는 무시할 만합니다. 나는 여전히 길이를 사용하는 것이 더 간결한 조건 대신 코드의 의도에 대해 더 의미가 있습니다.


3
jsperf.com의 도구에 제공 한 링크에 따르면 .length현재 최고의 평균 성능을 제공합니다.
gmeben

점검에있어 성능에 미치는 영향이 가장 적은 서버.
David O'Regan

77

jQuery없이 :

기본 JavaScript는 항상 더 빠릅니다. 이 경우 : (예)

if (document.querySelector('.mydivclass') !== null) {
    // .. it exists
}

부모 요소에 특정 클래스의 다른 요소가 포함되어 있는지 확인하려면 다음 중 하나를 사용할 수 있습니다. (예)

var parent = document.querySelector('.parent');

if (parent.querySelector('.child') !== null) {
    // .. it exists as a child
}

또는 .contains()부모 요소 에서 메서드를 사용할 수 있습니다 . (예)

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
}

57
$('div').hasClass('mydivclass')// Returns true if the class exist.

3
사실 이것은 대안이지만 값 비싼 것입니다. 느린 (이전 답변에서 사용 된 방법보다 것인가 현저하게 느린, 일부 브라우저에), 그리고 JQuery와의 배열을 구축하는 (훨씬 더 큰 메모리 영향을뿐만 아니라,이 모두div다시 이동, 페이지 요소와 루프를 통해 클래스가 있는지 확인하십시오. 모두 배열을 버립니다.)
TJ Crowder 2016

3
@tj hasClass는 여기의 다른 선택기보다 33 % 빠릅니다. jsperf.com/hasclass00
Hussein을

1
@Hussein : div내가 강조한 바로 그 문제를 회피하는 완전히 비현실적인 테스트 사례 (두 요소) 만 있습니다 (어레이 구축). jsperf.com/hasclass00/2 div로 시도해보십시오. Chrome 사본은 63 % 느리고 Firefox 사본은 43 % 느리고 Opera에서는 98 % (!) 느립니다. 그러나 선택기 엔진에 필요한 모든 정보를 제공하는 대신 div 목록을 작성한 다음 검색하는 것이 더 느리다 는 것이 합리적 입니다.
TJ Crowder

1
@Hussein : 저는 매우 고맙게 여기며 귀하의 주장에 대해 균형 잡힌 증거를 제시했습니다. 신경을 건드려서 죄송합니다. 지난번에도 그랬습니다. 휴식을 취하십시오. 개인적으로는 아니고 기술적 인 토론입니다. 두꺼운 피부와 열린 마음이 StackOverflow에 유용합니다.
TJ Crowder 2016

1
@Hussein : HTML5 CSS 선택기는 이것이 항상 가장 최악의 방법 일 것임을 의미합니다. 단순히 게시물을 삭제하지 않은 경우 -1입니다.
Stefan Kendall

46

Jquery를 사용하지 않는 솔루션은 다음과 같습니다.

var hasClass = element.classList.contains('class name to search');
// hasClass is boolean
if(hasClass === true)
{
     // Class exists
}

참조 링크


1
classList는 IE10 +에서 지원됩니다 caniuse.com/classlist를 . polyfill github.com/eligrey/classList.js 를 추가 하거나 직접 메소드를 작성해야합니다
AFD

18

아주 간단합니다 ...

if ($('.mydivclass').length > 0) {
  //do something
}

10

div요소를 명시 적으로 테스트하려면 다음을 수행하십시오 .

if( $('div.mydivclass').length ){...}


.mydivclass브라우저 및 jQuery 버전에 따라 약간 느릴 수 있습니다 .
Stefan Kendall

사실, OP는 구체적으로 "jQuery- 특정 클래스 이름의 div 가 있는지 확인하십시오 "라고 강조했습니다 div.
TJ Crowder 2016

7

간단한 코드는 다음과 같습니다.

if ($('.mydivclass').length > 0) {
   //Things to do if class exist
}

particuler id로 div를 숨기려면 :

if ($('#'+given_id+'.mydivclass').length > 0) {
   //Things to do if class exist
}

3

몇 가지 방법이 있습니다.

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.
    }

요구 사항에 따라 abobe 정의 방법 중 하나를 사용할 수 있습니다.


2
if ($(".mydivclass").size()){
   // code here
}

size()메소드는 jQuery 선택기가 선택한 요소 수 (이 경우 클래스가있는 요소 수) 만 반환합니다 mydivclass. 0을 반환하면식이 false이므로 아무 것도 없으므로 다른 숫자를 반환하면 div가 있어야합니다.


1
length속성 이있을 때 왜 메서드를 호출 합니까? 또한 이것은 클래스뿐만 아니라 해당 클래스의 모든 요소를 검사 합니다 div. (이제는 OP가 말한 것이 아니더라도 OP가 의미했던 것일 수 있습니다.) OP가 실제로 한 말을 수행하는 Stefan Kendall의 답변 을 참조하십시오 (다시 말하지만, 그들은 당신이 한 일을 의미했을 수도 있습니다).
TJ Crowder 2016

1
@ TJ Crowder : 글쎄, 개인적인 취향-size () 메소드가 있다고 생각합니다. 왜 사용하지 않습니까? 함수를 호출 할 때의 추가 오버 헤드 (루프에서 1000 번 수행하지 않는 한)는 너무 작으므로 코드의 선명도를 높이고 싶습니다. 두 번째 div이유로 -예, 나는 두 가지 이유로 인해 원래의 대답을 변경하여 부분 을 제거했습니다 .1) OP가 div요소를 사용한다는 사실 (향후에 변경 될 수 있음)과 2)에서 선택기가 제한되지 않습니다 . 대부분의 브라우저와 jQuery, AFAIK 버전이 더 빠릅니다.
허먼 샤프

"크기 () 메소드가 있다고 생각합니다. 왜 사용하지 않습니까? " length사용하지 왜 속성은 무엇입니까? 그러나 그것이 당신의 취향이라면, 공정합니다. 다른 한편으로는, 당신이 그것을 편집했는지 몰랐습니다. 내가 그렇게하려고한다면, 나는 그것을 남겨 두었을 것입니다 (다시 그는 구체적으로 "... if div with ..." (내 강조) 라고 말한 다음 추가 여부는 중요하지 않다고 언급했습니다) 이었다 div여부, 당신은 그 부분을 도랑 수 그러나 어떤 :-)..
TJ 크라우

@TJ Crowder : 예, 우리는 이것을 너무 많이 생각하고 있습니다.
허먼 샤프

@ TJ Crowder : 그러나 내 방어에서는 이것이 토론의 장소는 아니지만 : 나는 size()오래된 배열뿐만 아니라 jQuery 선택기의 요소 수를 세는 것을 분명히하기 위해 방법이 있다고 생각합니다 . 그러나 다시, 그것은 단지 나의 선호입니다.
허먼 샤프

2

특정 클래스에 div가 있는지 확인하십시오.

if ($(".mydivclass").length > 0) //it exists 
{

}

2
if($(".myClass")[0] != undefined){
  // it exists
}else{
  // does not exist
}

2
이 기존 답변 과 거의 동일합니다 .
Pang

그렇습니다 ...하지만 그 대답을 시도했지만 작동하지 않았습니다. 'undefined'에 비교를 추가하면 완벽하게 작동하는 것처럼 보입니다.
stairie

2
var x = document.getElementsByClassName("class name");
if (x[0]) {
alert('has');
} else {
alert('no has');
}

이 코드는 질문에 대답 할 수 있지만,이 코드가 질문에 응답하는 이유 및 / 또는 방법에 대한 추가 컨텍스트를 제공하면 장기적인 가치가 향상됩니다.
Vishal Chhodwani

2

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

}

2

다음은 자바 스크립트의 검사 클래스 (hasClass)에 대한 샘플 솔루션입니다.

const mydivclass = document.querySelector('.mydivclass');
// if 'hasClass' is exist on 'mydivclass'
if(mydivclass.classList.contains('hasClass')) {
   // do something if 'hasClass' is exist.
}

1

자바 스크립트에서 가장 좋은 방법 :

if (document.getElementsByClassName("search-box").length > 0) {
// do something
}

1

if ($ ( "# myid1"). hasClass ( "mydivclass")) {// 아무것든지}


귀하의 답변에 대한 설명을 입력하십시오
실행 파일

0

이것을 사용하여 전체 페이지를 검색하십시오.

if($('*').hasClass('mydivclass')){
// Do Stuff
}
당사 사이트를 사용함과 동시에 당사의 쿠키 정책개인정보 보호정책을 읽고 이해하였음을 인정하는 것으로 간주합니다.
Licensed under cc by-sa 3.0 with attribution required.