source

jQuery: 특정 클래스 이름을 가진 div가 있는지 확인합니다.

factcode 2022. 9. 12. 11:33
반응형

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://api.jquery.com/size/

http://api.jquery.com/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의 수)를합니다.이 경우 클래스가 포함된 요소의 수입니다.mydivclass0을 나타나다다른 숫자를 반환하는 경우 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

반응형