Как найти, существует ли div с определенным идентификатором в jQuery?

У меня есть функция, которая добавляет <div> к элементу при щелчке. Функция получает текст щелкнутого элемента и назначает его переменной с именем name. Затем эта переменная используется как <div> id добавленного элемента.

Мне нужно проверить, существует ли <div> id с name до добавления этого элемента, но я не знаю, как это найти.

Вот мой код:

$("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.

Ответы

Ответ 1

Вы можете использовать .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');
  }
});

Или версия non-jQuery для этой части (так как это идентификатор):

$("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');
  }
});

Ответ 2

Ник отвечает на это. Вы также можете использовать возвращаемое значение getElementById непосредственно как ваше условие, а не сравнивать его с нулевым (в любом случае работает, но я лично считаю этот стиль немного более удобочитаемым):

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

Ответ 3

Попробуйте проверить длину селектора, если он возвращает вам что-то, тогда элемент должен существовать иначе.

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
}

Используйте первое условие if для id и второе для класса.

Ответ 4

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

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

Ответ 5

Вы можете проверить с помощью jquery просто так:

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

Ответ 6

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

}

Еще один сокращенный путь:

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

Ответ 7

Вы можете обрабатывать его по-разному,

Цель - проверить, существует ли div, а затем выполнить код. Простой.

Состояние:

$('#myDiv').length

Примечание:

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

Это будет возвращать число каждый раз, когда он будет выполнен, поэтому, если нет div, он даст нуль [0], и поскольку мы не можем быть представлены в двоичном виде как false, вы можете использовать его в инструкции if. И вы можете использовать его как сравнение с ни одним номером. в то время как любые три приведенные ниже утверждения

// 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>");
    }

Ответ 8

Вот функция jQuery, которую я использую,

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

Это вернет логическое значение. Если элемент существует, он возвращает true. Если вы хотите выбрать элемент по имени класса, просто замените # на .

Ответ 9

введите идентификатор, который вы хотите проверить в режиме jquery.

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
}