javascript - variable - ¿Cómo encontrar si existe div con id específico en jQuery?

si variable existe javascript

Question

Tengo una función que agrega un <div> a un elemento al hacer clic. La función obtiene el texto del elemento pulsado y lo asigna a una variable llamada name . Esa variable se usa luego como el id <div> del elemento adjunto.

Necesito ver si ya existe un id <div> con name antes de adjuntar el elemento pero no sé cómo encontrarlo.

Aquí está mi 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'');
});

Esto parece bastante sencillo, pero aparece el error " Fin de archivo inesperado al buscar el nombre de la clase" . No tengo ni idea de lo que eso 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>");
}

Lo que es más es que quiero poder eliminar este elemento si lo cierro, lo que luego eliminará el div id [name] del documento, pero .remove() no hace esto.

Aquí está el código para eso:

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

.mini-close a la función de .labels como un elemento secundario de .labels por lo que había una forma de cerrar el <div> anexado si fuera necesario. Después de hacer clic en .mini-close e intentar hacer clic nuevamente en el mismo nombre de li.friends , todavía encuentra el div id [name] y devuelve la primera parte de mi declaración if .

Answer 1

Aquí está la función jQuery que uso:

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

Esto devolverá un valor booleano. Si el elemento existe, devuelve verdadero. Si desea seleccionar un elemento por nombre de clase, simplemente reemplace # por .

Answer 2

Intente verificar la longitud del selector, si le devuelve algo, entonces el elemento debe existir, de lo contrario no existe.

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
}

Utilice la primera condición if para id y la segunda para clase.

Answer 3

La forma más sencilla es ...

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

Esto también es parte de las especificaciones de 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.

Answer 4

La respuesta de Nick lo clava. También puede usar el valor de retorno de getElementById directamente como su condición, en lugar de compararlo con un valor nulo (de cualquier manera funciona, pero personalmente encuentro que este estilo es un poco más legible):

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

Answer 5

Puede usar .length después del selector para ver si coincide con algún elemento, como este:

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

La versión 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'');
  }
});

O, la versión no jQuery para esta parte (ya que es una 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'');
  }
});

Answer 6

Puedes manejarlo de diferentes maneras,

El objetivo es verificar si el div existe y luego ejecutar el código. Sencillo.

Condición:

$(''#myDiv'').length

Nota:

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

Esto devolverá un número cada vez que se ejecute, por lo que si no hay div, se obtendrá un Cero [0], y como no se puede representar a 0 como falso en binario, puede usarlo en la sentencia if. Y puedes usarlo como una comparación con un número ninguno. mientras que cualquiera hay tres declaraciones dadas a continuación

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

Answer 7

Puedes verificar usando jquery así:

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

Answer 8

poner el id que desea comprobar en jquery es el método.

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
}

Answer 9

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

}

Otra forma abreviada:

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

Answer 10

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

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