Como descobrir se div com id específico existe no jQuery?

Eu tenho uma função que anexa a <div>a um elemento no clique. A função obtém o texto do elemento clicado e o atribui a uma variável chamada name. Essa variável é então usada como o <div> idelemento anexado.

Preciso ver se já existe um <div> idcom nameantes de anexar o elemento, mas não sei como encontrar isso.

Aqui está o meu código:

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

Isso parece bastante simples, mas estou recebendo o erro " Fim inesperado de arquivo ao procurar pelo nome da classe" . Eu não tenho idéia do que isso significa.

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

O que é mais é que desejo excluir esse elemento se eu o fechar, o que deve remover o div id [name]do documento, mas .remove()não o faz.

Aqui está o código para isso:

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

Eu adicionei .mini-closeà função de acréscimo como filho de, .labelsportanto, havia uma maneira de fechar o acréscimo, <div>se necessário. Depois de clicar .mini-closee tentar clicar no mesmo nome novamente, li.friendsele ainda encontra div id [name]e retorna a primeira parte da minha ifdeclaração.

Você pode usar .lengthapós o seletor para ver se ele corresponde a algum elemento, como este:

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

A versão completa:

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

Ou, a versão não jQuery para esta parte (já que é um 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');
  }
});

A resposta de Nick acertou em cheio. Você também pode usar o valor de retorno de getElementById diretamente como sua condição, em vez de compará-lo com nulo (de qualquer maneira funciona, mas eu pessoalmente acho esse estilo um pouco mais legível):

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

Tente verificar o comprimento do seletor, se ele retornar alguma coisa, o elemento deverá existir ou não.

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
}

Use a primeira condição if para id e a segunda condição para a classe.

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

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

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

}

Outra maneira abreviada:

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

Você pode verificar usando jquery da seguinte maneira:

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

A maneira mais simples é ..

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

Isso também faz parte das especificações do 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.

Aqui está a função jQuery que eu uso:

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

Isso retornará um valor booleano. Se o elemento existir, ele retornará verdadeiro. Se você deseja selecionar o elemento pelo nome da classe, substitua-o #por.

Você pode lidar com isso de maneiras diferentes,

O objetivo é verificar se a div existe e executar o código. Simples.

Doença:

$('#myDiv').length

Nota:

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

Isso retornará um número toda vez que for executado, por isso, se não houver div, fornecerá um Zero [0], e como nenhum 0 pode ser representado como falso no binário, você pode usá-lo na instrução if. E você pode usá-lo como uma comparação com um número nenhum. enquanto houver três afirmações abaixo

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

coloque o id que você deseja verificar no jquery is method.

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
}