jquery si div id a des enfants

202

Cette ifcondition est ce qui me pose problème:

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

J'ai essayé tout ce qui suit:

if ( $('#myfav:hasChildren') ) { do something }
if ( $('#myfav').children() ) { do something }
if ( $('#myfav:empty') ) { do something }
if ( $('#myfav:not(:has(*))') ) { do something }
jquery children Chris
la source

Réponses:

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

Cela devrait fonctionner. La children()fonction renvoie un objet JQuery qui contient les enfants. Il vous suffit donc de vérifier la taille et de voir s'il a au moins un enfant.

S Pangborn
la source
1
Merci d'avoir répondu. C'est ce qui a fonctionné pour moi. Je savais que j'étais sur la bonne voie avec les enfants (), mais je ne savais pas ce qui n'allait pas. Apparemment, la taille pourrait être 0, c'est logique.
Chris
2
Si vous ajoutez un sélecteur aux enfants, vous pouvez également vérifier si un élément a des enfants qui correspondent à un sélecteur particulier, comme si vous voulez voir si un élément a un enfant d'une classe particulière.
Muhd
11
problème mineur. ne signifie pas nitpick mais children().lengthdevrait être appelé à la place de size () par les documents jQuery ici: api.jquery.com/size
Brian Chavez
4
Et si le nœud ne contient que du texte!?
botenvouwer
1
@sirwilliam Le nœud retournera avec une longueur nulle.
Meki
54

Cet extrait de code déterminera si l'élément a des enfants à l'aide du :parentsélecteur:

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

Notez que :parentconsidère également un élément avec un ou plusieurs nœuds de texte comme un parent.

Ainsi, les divéléments contenus dans <div>some text</div>et <div><span>some text</span></div>seront chacun considérés comme un parent mais <div></div>ne le sont pas.

dcharles
la source
2
Oui, je pense que cette réponse est plus élégante que celle de S Pangborn. Les deux sont cependant tout à fait légitimes.
KyleFarris
1
@Milo LaMar, je soupçonne qu'il n'y a pas beaucoup de différence de performance, mais la seule façon d'être sûr est de l'essayer! En outre, vous devez supprimer l'espace entre #myfavet :parentdans votre exemple, sinon le sélecteur n'est pas le même que ce que ma réponse fournirait.
dcharles
3
Une très petite quantité de lecture m'a répondu suffisamment. Extrait 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").
Milo LaMar
6
les résultats des tests de performances en 0,002s - je préfère cette façon, car c'est mieux lisible ...
dtrunk
1
Je suis confus, n'est-ce pas la meilleure réponse?
Andrei Cristian Prodan
47

Une autre option, juste pour le diable, serait:

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

Peut-être en fait le plus rapide car il utilise strictement le moteur Sizzle et pas nécessairement n'importe quel jQuery, pour ainsi dire. Cela pourrait être faux cependant. Néanmoins, cela fonctionne.

KyleFarris
la source
16

Il existe en fait une méthode native assez simple pour cela:

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

Notez que cela inclut également des nœuds de texte simples, ce sera donc le cas pour a <div>text</div>.

Simon
la source
$(...)[0] is undefinedcela peut se produire s'il #myfavn'est pas trouvé. Je tester l'existence du premier élément adapté avant d'appliquer cette condition, à savoir: $('#myfav')[0] && $('#myfav')[0].hasChildNodes().
CPHPython
13

et si vous voulez vérifier que div a un enfant perticulaire (dites <p>:

if ($('#myfav').children('p').length > 0) {
     // do something
}
suhailvs
la source
7

Vous pouvez également vérifier si div a des enfants spécifiques ou non, 

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

}
Rakesh Chaudhari
la source
4

La manière jQuery

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

Démo

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');
}
.success {
    background: #9f9;
}

.failure {
    background: #f99;
}
<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>
Développer l'extrait

La façon vanille JS

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

Démo

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');
}
.success {
    background: #9f9;
}

.failure {
    background: #f99;
}
<div id="test">
   <span>Children</span>
</div>
<div id="test2">
   No children
</div>
Développer l'extrait

John Slegers
la source