jquery si div id a des enfants

Ce ifcondition est ce qui me fait mal:

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

J'ai essayé toutes les conditions suivantes:

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
  1. 409
    if ( $('#myfav').children().length > 0 ) {
     //do something
}

    Cela devrait fonctionner. Le children() fonction retourne un objet JQuery qui contient les enfants. Vous avez juste besoin de vérifier la taille et voir si elle a au moins un enfant.

    • Merci pour la réponse. C'est ce qui a fonctionné pour moi. Je savais que j'étais sur la bonne voie avec la .les enfants(), mais je ne savais pas ce qui n'allait pas avec elle. Apparemment la taille pourrait être 0, a du sens.
    • Si vous ajoutez un sélecteur pour les enfants, vous pouvez également vérifier si un élément a des enfants qui correspondent à un sélecteur, comme si vous voulez voir si un élément a un enfant d'une classe particulière.
    • problème mineur. ne veux pas pinailler, mais children().length doit être appelée au lieu de la taille() par jQuery docs ici: api.jquery.com/size
    • résultats des tests de performances en 0.006 s
    • Et si le nœud ne contient que du texte!?
    • Le nœud sera de retour avec un 0 de longueur.

    InformationsquelleAutor S Pangborn
  2. 51

    Cet extrait de déterminer si l'élément a des enfants à l'aide de la :parent sélecteur:

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

    Noter que :parent estime également un élément avec un ou plusieurs nœuds de texte pour être un parent.

    Ainsi, le div éléments dans <div>some text</div> et <div><span>some text</span></div> seront chaque être considéré comme un parent, mais <div></div> n'est pas un parent.

    • +1 pour le informative explication, bien qu'elle ne fonctionne pas pour moi, car mon code est l'une de ces exceptions où j'ai espaces et de nouvelles lignes de restes de vieux supprime. Bonne info cependant.
    • Oui, je pense que cette réponse est plus élégant que le S Pangborn de l'. Les deux sont totalement légitimes si.
    • Je sais que c'est vieux, mais serait ($('#myfav :parent').length > 0) être plus rapide? Je trouve le vôtre plus lisible, de sorte qu'il n'est probablement pas la peine de le commerce dans la plupart des situations.
    • LaMar, je serais suspect il n'y a pas beaucoup de différence en termes de performances, mais la seule façon d'en être sûr est de l'essayer! Aussi, vous seriez obligé de supprimer l'espace entre #myfav et :parent dans votre exemple, sinon le sélecteur n'est pas le même que ce que ma réponse serait de fournir.
    • Une très petite quantité de lecture répondu assez pour moi. Prises à partir 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").
    • LaMar, merci de prendre le temps de les examiner.
    • résultats des tests de performances en 0.002 s - je préfère cette façon, parce que c'est mieux lisible...
    • Je suis confus, n'est-ce pas la meilleure réponse?
    • remarque Importante: la :parent sélecteur prend en compte tous les nœuds de texte -- qui comprend un espace blanc -- donc .is(':parent') est vrai si vous aviez un seul espace, comme <div> </div>.

    InformationsquelleAutor dcharles
  3. 47

    Une autre option, juste pour le fun, il serait:

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

    Est peut être le plus rapide car il utilise strictement le Grésillement du moteur et pas nécessairement de jQuery, comme elle l'avait fait. Pourrait être mal. Néanmoins, il fonctionne.

    • bonne réponse trop
    • votre chemin est parfait!
    • résultats des tests de performances en 0.002 s
    InformationsquelleAutor KyleFarris
  4. 16

    Il y a en fait assez simple, une méthode native pour cela:

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

    Noter que cela inclut aussi simple nœuds de texte, de sorte qu'il sera vrai pour un <div>text</div>.

    • $(...)[0] is undefined cela peut se produire si #myfav n'est pas trouvé. J'aimerais tester l'existence de la première appariés élément avant d'appliquer cette condition, c'est à dire: $('#myfav')[0] && $('#myfav')[0].hasChildNodes().
    InformationsquelleAutor Simon
  5. 13

    et si vous voulez vérifier div a un particulier des enfants(dire <p> utilisation:

    if ($('#myfav').children('p').length > 0) {
     //do something
}
    • Cela a fonctionné pour moi.
    InformationsquelleAutor suhailvs
  6. 4

    Vous pouvez aussi vérifier si la div a des enfants ou pas, 

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

}
    InformationsquelleAutor Rakesh Chaudhari
  7. 3

    Le jQuery façon

    En jQuery, vous pouvez utiliser $('#id').children().length > 0 pour tester si un élément a des enfants.

    Démo

    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 vanille JS façon

    Si vous ne souhaitez pas utiliser jQuery, vous pouvez utiliser document.getElementById('id').children.length > 0 pour tester si un élément a des enfants.

    Démo

    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>

    InformationsquelleAutor John Slegers