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


266

<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의 자식으로의 append 기능에 .labels첨부 된 밖으로 닫을 수있는 방법이 있었다 있도록 <div>필요한 경우. 클릭 한 후 .mini-close로부터 다시 같은 이름을 클릭하는 시도 li.friends는 아직 발견 div id [name]내의 첫 번째 부분 반환 if문을.


예기치 않은 파일 끝은 일반적으로 어딘가에 구문 오류로 귀결됩니다. $("div#" + name).css({bottom: '30px'});잘못, 그것은해야$("div#" + name).css('bottom', '30px');
제이 어바인

Remove ()는 DOM 트리에서 요소를 분리하지만 파괴하지는 않습니다. 따라서 ID로 검색해도 요소를 찾을 수 있습니다. 변수에 변수를 할당하면 여전히 존재합니다. 그것을 찾아서 올바른 div에 추가하십시오 (이미 존재하지 않는 경우, 분리 / 제거 된 경우 다시 나타납니다). 찾을 수 없으면 발견하십시오.
Jay Irvine

답변:


539

.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');
  }
});

98
비 jQuery 부분에 많은 jQuery : p
jAndy

@ Nick-이것은 나를 위해 작동하지 않습니다. 문제를 해결하는 동안 [name]의 div id 길이를 경고했지만 찾지 못했습니다.
sadmicrowave

8
if ($ ( "#"+ name) .length) {}가 제대로 작동하면 == 0을 검사 할 필요가 없습니다.
ScottE

3
@ScottE-그것은 반대로, 당신은 의미합니다 !$("#"+name).length):)
Nick Craver

1
나는 당신이 ===톱 대신 해야한다고 생각합니다 ==.
danger89

66

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

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

당신이 옳습니다, 이것은 훌륭하게 작동합니다 (나는 어리석은 짓을해야합니다). 그러나 alert ()을 다른 것으로 바꾸면 "클래스 이름을 검색하는 동안 예기치 않은 파일 끝"이라는 오류가 발생합니다. 왜 이런 일이 발생합니까? 내 alert () 함수를 다음으로 대체하는 것에 대한 내 OP를 참조하십시오.
sadmicrowave

다른 사람의 추가 아이디어?
sadmicrowave

2
대괄호 나 세미콜론이없는 것처럼 오류가 발생합니다.
Rikki

@Philo 배열에서 보유한 특정 ID를 일치
시키

배열에 여러 개의 ID가 있고 각 ID를 찾고 싶습니까? 무차별 대입 방식은 배열을 반복하고 각각에 대해 getElementById를 호출하는 것입니다.
Philo

31

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

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 조건을 사용하십시오.


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

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

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

}

또 다른 속기 :

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

ID ( "#myDiv")가 존재할 때 if 함수 안에 쓸 수있는 예제입니다.
Sanjib Debnath

5

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

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

1
if ($ ( '# divId'). length! = 0) {여기 코드는 정확합니다
Santosh


3

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

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

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


2

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

목적 은 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>");
    }

1

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
}
당사 사이트를 사용함과 동시에 당사의 쿠키 정책개인정보 보호정책을 읽고 이해하였음을 인정하는 것으로 간주합니다.
Licensed under cc by-sa 3.0 with attribution required.