una - jQuery-Comprueba si el elemento DOM ya existe

saber si existe una clase jquery

Question

Estoy tratando de agregar algunos elementos de forma dinámicamente a través de Ajax con jQuery. Quiero asegurarme de no crear el mismo elemento dos veces, así que solo quiero agregarlo si no se ha agregado al DOM.

Todos mis elementos tienen una identificación CSS única, por ejemplo:

$(''#data_1'')

Estoy usando lo siguiente para verificar si el elemento ya existe:

if ($(''some_element'').length == 0) {
    //Add it to the dom
}

Sin embargo, solo funciona para elementos que ya formaban parte de la página cuando se cargó por primera vez.

¿Cómo compruebo también los elementos que se crearon dinámicamente después de cargar la página?

Cualquier consejo es apreciado.

Gracias.

Answer 1

En este caso, es posible que desee comprobar si el elemento existe en el DOM actual

Si desea verificar si el elemento existe en el árbol DOM (está adjunto a DOM), puede usar:

var data = $(''#data_1''); 
if(jQuery.contains(document.documentElement, data[0])){
    // #data_1 element attached to DOM
} else {
    // is not attached to DOM
}

Answer 2

Esta pregunta es acerca de si un elemento existe y todas las respuestas verifican si no existe :) Diferencia menor, pero vale la pena mencionar.

Basado en la documentación de jQuery, la forma recomendada de verificar la existencia es

if ($( "#myDiv" ).length) {
    // element exists
}

Si prefieres buscar elementos faltantes, puedes usar:

if (!$( "#myDiv" ).length) {
    // element doesn''t exist
}

o

if (0 === $( "#myDiv" ).length) {
    // element doesn''t exist
}

Tenga en cuenta que en la segunda opción he usado === que es ligeramente más rápido que == y ponga el 0 a la izquierda como condición de Yoda .

Answer 3

Esto debería funcionar para todos los elementos independientemente de cuándo se generen.

if($(''some_element'').length == 0) {
}

escriba su código en las funciones de devolución de llamada ajax y debería funcionar bien.

Answer 4

No para comparar nada, simplemente puedes verificarlo con esto ...,.

if(document.getElementById("url")){ alert(''exit'');}
if($("#url")){alert(''exist'');}

También puede utilizar la función html (), así como

if($("#url).html()){alert(''exist'');}

Answer 5

Si el ID está disponible, puede usar getElementById()

var element =  document.getElementById(''elementId'');
  if (typeof(element) != ''undefined'' && element != null)
  { 
     // exists.
  }

O prueba con Jquery -

if ($(document).find(yourElement).length == 0) 
{ 
 // -- Not Exist
}

Answer 6

Solo para confirmar que está seleccionando el elemento de la manera correcta. Prueba este

if ($(''#some_element'').length == 0) {
    //Add it to the dom
}

Answer 7

Supongo que se olvidó de añadir el elemento a DOM.

Compruébelo HERE .

Answer 8

También piensa en usar

$(document).ready(function() {});

No sé por qué a nadie aquí se le ocurrió esto todavía (un poco triste). ¿Cuándo ejecutas tu código? Justo al principio? Entonces, es posible que desee utilizar la función ready () mencionada en la parte superior para que su código se ejecute después de que se haya cargado toda la página (con todos sus elementos dom) y no antes. Por supuesto, esto es inútil si ejecuta algún código que agregue elementos dom después de cargar la página. Entonces simplemente desea esperar esas funciones y ejecutar su código después ...

Answer 9

if ($(''#some_element'').length === 0) {
    //If exists then do manipulations
}

Answer 10

(()=> {
    var elem = document.querySelector(''.elem'');  
    (
        (elem) ? 
        console.log(elem+'' was found.'') :
        console.log(''not found'')
    )
})();

Si existe, escupe el elemento especificado como un objeto DOM. Con JQuery $(''.elem'') solo te dice que es un objeto si se encuentra, pero no cuál.