web-dev-qa-db-fra.com

jquery si div id a des enfants

Cette if- condition 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 }
jquerychildren
191
Chris
if ( $('#myfav').children().length > 0 ) {
     // do something
}

Cela devrait marcher. La fonction children() renvoie un objet JQuery contenant les enfants. Donc, il vous suffit de vérifier la taille et de voir si elle a au moins un enfant.

413
S Pangborn

Cet extrait déterminera si l'élément a des enfants à l'aide du sélecteur :parent :

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

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

Ainsi, les éléments div dans _<div>some text</div>_ et _<div><span>some text</span></div>_ seront chacun considérés comme parents, mais _<div></div>_ n'est pas un parent.

51
dcharles

Une autre option, juste pour le plaisir, serait:

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

Peut-être en fait le plus rapide puisqu'il utilise strictement le moteur Sizzle et pas nécessairement n'importe quel jQuery, pour ainsi dire. Pourrait être faux cependant. Néanmoins, ça marche.

47
KyleFarris

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

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

Notez que ceci inclut également des nœuds de texte simples, donc ce sera vrai pour un <div>text</div>.

16
Simon

et si vous voulez vérifier que div a un enfant en particulier (disons <p> _ use:

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

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

}
4
Rakesh Chaudhari

La manière jQuery

Dans jQuery, vous pouvez utiliser $('#id').children().length > 0 pour vérifier 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>

À la vanille JS

Si vous ne souhaitez pas utiliser jQuery, vous pouvez utiliser document.getElementById('id').children.length > 0 pour vérifier 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>
3
John Slegers