jquery si div id tiene hijos

Este if-condición es lo que me da problemas:

if (div id=myfav has children) {
   do something
} else {
   do something else 
}

He intentado todos los siguientes:

if ( $('#myfav:hasChildren') ) { do something }
if ( $('#myfav').children() ) { do something }
if ( $('#myfav:empty') ) { do something }
if ( $('#myfav:not(:has(*))') ) { do something }
InformationsquelleAutor Chris | 2009-10-06

7 Kommentare

  1. 424
    if ( $('#myfav').children().length > 0 ) {
         //do something
    }

    Esto debería funcionar. El children() función devuelve un objeto JQuery que contiene a los niños. Tan sólo tiene que comprobar el tamaño y ver si tiene al menos un hijo.

    • Gracias por la respuesta. Esto es lo que funcionó para mí. Yo sabía que estaba en la pista de la derecha con el .los niños(), pero no sabía lo que estaba mal con él. Al parecer, el tamaño podría ser de 0, tiene sentido.
    • Si añade un selector para los niños, también se puede comprobar si un elemento tiene niños que coinciden con un selector en particular, como si quieres ver si un elemento tiene un niño de una clase en particular.
    • tema menor. no quiero ser quisquilloso pero children().length debe ser llamado en lugar de tamaño() por jQuery docs aquí: api.jquery.com/size
    • Y qué si el nodo que sólo contiene el texto!?
    • El nodo volverá con 0 de longitud.
  2. 52

    Este fragmento va a determinar si el elemento tiene niños en el uso de la :padre selector:

    if ($('#myfav').is(':parent')) {
        //do something
    }

    Nota que :parent también se considera un elemento con uno o más nodos de texto para ser un padre.

    Por lo tanto la div elementos en <div>some text</div> y <div><span>some text</span></div> cada uno será considerado como un padre, pero <div></div> no es un padre.

    • +1 para el informativo explicación, aunque no funcionó para mí, ya que mi código es una de esas excepciones en las que tengo espacios y nuevas líneas de restos de antiguas quita. Buena info, aunque.
    • Sí, creo que esta respuesta es más elegante que el S Pangborn del. Ambos son totalmente de fiar, aunque.
    • Sé que esto es viejo, pero ($('#myfav :parent').length > 0) ser más rápido? He encontrado que el suyo sea más legible, por lo que probablemente no vale la pena el comercio libre en la mayoría de situaciones.
    • LaMar, sospecho que no es mucho de una diferencia de rendimiento, pero la única manera de estar seguro es probarlo! También, usted tendrá que quitar el espacio entre #myfav y :parent en tu ejemplo, de lo contrario, el selector no es igual a lo que mi respuesta iba a proporcionar.
    • Una cantidad muy pequeña de la lectura respondió suficiente para mí. Tomado de api.jquery.com/parent-selector Additional Notes: Because :parent is a jQuery extension and not part of the CSS specification, queries using :parent cannot take advantage of the performance boost provided by the native DOM querySelectorAll() method. To achieve the best performance when using :parent to select elements, first select the elements using a pure CSS selector, then use .filter(":parent").
    • resultados de pruebas de rendimiento en 0.002 s – prefiero de esta manera, porque lo mejor es legible…
    • Estoy confundido, no es esta la mejor respuesta?
    • nota Importante: el :parent selector toma en cuenta todos los nodos de texto — que incluye el espacio en blanco — así .is(':parent') es cierto si tenía un solo espacio, como <div> </div>.

  3. 47

    Otra opción, sólo para la base de todo esto sería:

    if ( $('#myFav > *').length > 0 ) {
         //do something
    }

    Puede en realidad ser el más rápido, ya que estrictamente utiliza el Chisporroteo del motor y no necesariamente de jQuery, por así decirlo. Podría estar equivocado, sin embargo. Sin embargo, funciona.

  4. 16

    Hay en realidad bastante simple método nativo para esto:

    if( $('#myfav')[0].hasChildNodes() ) { ... }

    Tenga en cuenta que esto también incluye los nodos de texto, por lo que será válido para una <div>text</div>.

    • $(...)[0] is undefined esto puede suceder si #myfav no se encuentra. Me gustaría probar la existencia del primer elemento coincidente antes de aplicar esa condición, es decir: $('#myfav')[0] && $('#myfav')[0].hasChildNodes().
  5. 13

    y si quieres comprobar div tiene un particular de los niños(decir <p> uso:

    if ($('#myfav').children('p').length > 0) {
         //do something
    }
  6. 4

    También puede comprobar si el div tiene hijos o no,

    if($('#myDiv').has('select').length>0)
    {
       //Do something here.
       console.log("you can log here");
    
    }
  7. 3

    El jQuery manera

    En jQuery, puede utilizar $('#id').children().length > 0 para probar si un elemento tiene hijos.

    Demo

    JS:

    var test1 = $('#test');
    var test2 = $('#test2');
    
    if(test1.children().length > 0) {
        test1.addClass('success');
    } else {
        test1.addClass('failure');
    }
    
    if(test2.children().length > 0) {
        test2.addClass('success');
    } else {
        test2.addClass('failure');
    }

    CSS:

    .success {
        background: #9f9;
    }
    
    .failure {
        background: #f99;
    }

    HTML:

    <script src="https://code.jquery.com/jquery-1.12.2.min.js"></script>
    <div id="test">
       <span>Children</span>
    </div>
    <div id="test2">
       No children
    </div>


    La vainilla JS manera

    Si usted no desea utilizar jQuery, puede utilizar document.getElementById('id').children.length > 0 para probar si un elemento tiene hijos.

    Demo

    JS:

    var test1 = document.getElementById('test');
    var test2 = document.getElementById('test2');
    
    if(test1.children.length > 0) {
        test1.classList.add('success');
    } else {
        test1.classList.add('failure');
    }
    
    if(test2.children.length > 0) {
        test2.classList.add('success');
    } else {
        test2.classList.add('failure');
    }

    CSS:

    .success {
        background: #9f9;
    }
    
    .failure {
        background: #f99;
    }

    HTML:

    <div id="test">
       <span>Children</span>
    </div>
    <div id="test2">
       No children
    </div>

Kommentieren Sie den Artikel

Bitte geben Sie Ihren Kommentar ein!
Bitte geben Sie hier Ihren Namen ein

Pruebas en línea