jquery, если у div id есть дети

Question

Это if условие - вот что доставляет мне неприятности:

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 }

Answer 1

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

Это должно работать. Функция children() возвращает объект JQuery, который содержит дочерние элементы. Так что вам просто нужно проверить размер и посмотреть, есть ли у него хотя бы один ребенок.

Answer 2

Этот фрагмент будет определять наличие дочерних элементов с помощью селектора :parent:

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

Обратите внимание, что :parent также считает элемент с одним или несколькими текстовыми узлами родителем.

Таким образом, каждый элемент div в <div>some text</div> и <div><span>some text</span></div> будет считаться родительским, но <div></div> не является родительским.

Answer 3

Другой вариант, черт возьми, будет:

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

Может на самом деле быть самым быстрым, поскольку он строго использует движок Sizzle, а не обязательно какой-либо JQuery, как это было раньше. Может быть неправильно, хотя. Тем не менее, это работает.

Answer 4

На самом деле для этого есть довольно простой нативный метод:

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

Обратите внимание, что это также включает в себя простые текстовые узлы, поэтому это будет верно для <div>text</div>.

Answer 5

, и если вы хотите проверить, есть ли у div дети, имеющие черепа (скажем, <p>, используйте:

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

Answer 6

Вы также можете проверить, есть ли у div определенные дети или нет,

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

}

Answer 7

Способ 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>