web-dev-qa-db-ja.com

div idに子がある場合のjquery

このif- conditionが問題の原因です。

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

私は次のすべてを試しました：

if ( $('#myfav:hasChildren') ) { do something }
if ( $('#myfav').children() ) { do something }
if ( $('#myfav:empty') ) { do something }
if ( $('#myfav:not(:has(*))') ) { do something }
jquerychildren
188
Chris
if ( $('#myfav').children().length > 0 ) {
     // do something
}

これは動作するはずです。 children()関数は、子を含むJQueryオブジェクトを返します。したがって、サイズを確認し、少なくとも1つの子があるかどうかを確認する必要があります。

406
S Pangborn

このスニペットは、要素に :parent セレクターを使用して子があるかどうかを判断します。

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

:parentは、1つ以上のテキストノードを持つ要素も親と見なします。

したがって、<div>some text</div>および<div><span>some text</span></div>のdiv要素はそれぞれ親と見なされますが、<div></div>は親ではありません。

51
dcharles

別のオプションは、ただそれのためだけです：

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

Sizzleエンジンを厳密に使用しているため、実際には最速かもしれません。しかし間違っている可能性があります。それにもかかわらず、それは動作します。

46
KyleFarris

実際には、これには非常に単純なネイティブメソッドがあります。

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

これには単純なテキストノードも含まれるため、<div>text</div>についても同様です。

15
Simon

divに特定の子があるかどうかを確認したい場合（たとえば<p>を使用：

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

Divに特定の子があるかどうかも確認できますが、

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

}
4
Rakesh Chaudhari

JQueryの方法

JQueryでは、$('#id').children().length > 0を使用して、要素に子があるかどうかをテストできます。

デモ

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>

バニラJSの方法

JQueryを使用したくない場合は、document.getElementById('id').children.length > 0を使用して、要素に子があるかどうかをテストできます。

デモ

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