IT story

jQuery에 특정 ID의 div가 있는지 확인하는 방법은 무엇입니까?

hot-time 2020. 4. 6. 08:14
반응형

jQuery에 특정 ID의 div가 있는지 확인하는 방법은 무엇입니까?


<div>클릭시 요소에 a 추가하는 함수가 있습니다. 이 함수는 클릭 한 요소의 텍스트를 가져 와서라는 변수에 할당합니다 name. 그런 다음 해당 변수는 <div> id추가 된 요소 로 사용됩니다 .

경우 내가 볼 필요 <div> idname내가 요소를 추가하기 전에 이미 존재하지만이를 찾는 방법을 모르겠어요.

내 코드는 다음과 같습니다.

$("li.friend").live('click', function() {
  name = $(this).text();

  // if-statement checking for existence of <div> should go here
  // If <div> does not exist, then append element
    $("div#chatbar").append("<div class='labels'><div id='" + name + "' style='display:none;'></div>" + name + "</div>");

  // Else
    alert('this record already exists');
});

이것은 매우 간단 해 보이지만 " 클래스 이름을 검색하는 동안 예기치 않은 파일 끝 "오류가 발생 합니다. 나는 그것이 무엇을 의미하는지 전혀 모른다.

if (document.getElementById(name)) {
  $("div#" + name).css({bottom: '30px'});
} else {
  $("div#page-content div#chatbar").append("<div class='labels'>" + name + "</div><div id='" + name + "'></div>");
}

또한이 요소를 닫으면 div id [name]문서 에서을 제거해야 하지만 .remove()이를 수행하지 않으면 이 요소를 삭제할 수 있기를 원합니다 .

그 코드는 다음과 같습니다.

$(".mini-close").live('click', function(){
  $(this).parent().remove();
});

.mini-close추가 기능을 하위 기능으로 추가 하여 필요한 경우 추가 된 기능 .labels을 닫을 수있는 방법이있었습니다 <div>. 클릭 한 후 .mini-close로부터 다시 같은 이름을 클릭하는 시도 li.friends는 아직 발견 div id [name]내의 첫 번째 부분 반환 if문을.


.length선택기 뒤에서 다음과 같이 요소와 일치하는지 확인할 수 있습니다 .

if($("#" + name).length == 0) {
  //it doesn't exist
}

정식 버전 :

$("li.friend").live('click', function(){
  name = $(this).text();
  if($("#" + name).length == 0) {
    $("div#chatbar").append("<div class='labels'><div id='" + name + "' style='display:none;'></div>" + name + "</div>");
  } else {
    alert('this record already exists');
  }
});

또는이 부분의 비 jQuery 버전 (ID이므로) :

$("li.friend").live('click', function(){
  name = $(this).text();
  if(document.getElementById(name) == null) {
    $("div#chatbar").append("<div class='labels'><div id='" + name + "' style='display:none;'></div>" + name + "</div>");
  } else {
    alert('this record already exists');
  }
});

닉의 대답은 그것을 못 박았다. getElementById의 반환 값을 null로 비교하지 않고 조건으로 직접 사용할 수도 있습니다 (어느 쪽이든 작동하지만 개인적 으로이 스타일을 좀 더 읽기 쉽습니다).

if (document.getElementById(name)) {
  alert('this record already exists');
} else {
  // do stuff
}

선택기의 길이를 확인하십시오. 무언가를 반환하면 요소가 존재하지 않아야합니다.

if( $('#selector').length )         // use this if you are using id to check
{
     // it exists
}


if( $('.selector').length )         // use this if you are using class to check
{
     // it exists
}

id의 첫 번째 if 조건과 클래스의 두 번째 if 조건을 사용하십시오.


if($("#id").length) /*exists*/

if(!$("#id").length) /*doesn't exist*/

if ( $( "#myDiv" ).length ) {
    //id id ( "#myDiv" ) is exist this will perform
    $( "#myDiv" ).show();

}

또 다른 속기 :

    $( "#myDiv" ).length && $( "#myDiv" ).show();

다음과 같이 jquery를 사용하여 확인할 수 있습니다.

if($('#divId').length!==0){
      Your Code Here
}

가장 간단한 방법은 ..

if(window["myId"]){
    // ..
}

이것은 또한 HTML5 사양의 일부입니다. https://www.w3.org/TR/html5/single-page.html#accessing-other-browsing-contexts#named-access-on-the-window-object

window[name]
    Returns the indicated element or collection of elements.

다른 방법으로 처리 할 수 ​​있습니다.

목적 은 div가 존재하는지 확인한 다음 코드를 실행하는 것입니다. 단순한.

조건:

$('#myDiv').length

노트 :

#myDiv -> < div id='myDiv' > <br>
.myDiv -> < div class='myDiv' > 

이것은 실행될 때마다 숫자를 반환하므로 div가 없으면 Zero [0]을 제공하며 0이 바이너리에서 false로 표시되지 않으므로 if 문에서 사용할 수 있습니다. 그리고 당신은 none number와 비교하기 위해 그것을 사용할 수 있습니다. 아래에 주어진 세 가지 진술이 있지만

// Statement 0
// jQuery/Ajax has replace [ document.getElementById with $ sign ] and etc
// if you don't want to use jQuery/ajax 

   if (document.getElementById(name)) { 
      $("div#page-content div#chatbar").append("<div class='labels'>" + name + "</div><div id='" + name + "'></div>");
    }

// Statement 1
   if ($('#'+ name).length){ // if 0 then false ; if not 0 then true
       $("div#page-content div#chatbar").append("<div class='labels'>" + name + "</div><div id='" + name + "'></div>");
    }

// Statement 2
    if(!$('#'+ name).length){ // ! Means Not. So if it 0 not then [0 not is 1]
           $("div#page-content div#chatbar").append("<div class='labels'>" + name + "</div><div id='" + name + "'></div>"); 
    }
// Statement 3
    if ($('#'+ name).length > 0 ) {
      $("div#page-content div#chatbar").append("<div class='labels'>" + name + "</div><div id='" + name + "'></div>");
    }

// Statement 4
    if ($('#'+ name).length !== 0 ) { // length not equal to 0 which mean exist.
       $("div#page-content div#chatbar").append("<div class='labels'>" + name + "</div><div id='" + name + "'></div>");
    }

내가 사용하는 jQuery 함수는 다음과 같습니다.

function isExists(var elemId){
    return jQuery('#'+elemId).length > 0;
}

부울 값을 반환합니다. 요소가 존재하면 true를 리턴합니다. 클래스 이름으로 요소를 선택하려면 다음으로 바꾸십시오 #..


jquery에서 확인하려는 ID를 입력하십시오.

var idcheck = $("selector").is("#id"); 

if(idcheck){ // if the selector contains particular id

// your code if particular Id is there

}
else{
// your code if particular Id is NOT there
}

참고 URL : https://stackoverflow.com/questions/3373763/how-to-find-if-div-with-specific-id-exists-in-jquery

반응형