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

202

Это 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 }
jquery children Крис
источник

Ответы:

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

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

С Пангборн
источник
1
Спасибо за ответ. Это то, что сработало для меня. Я знал, что нахожусь на правильном пути с .children (), но не знал, что с ним не так. Видимо, размер может быть 0, имеет смысл.
Крис
2
Если вы добавляете селектор к дочерним элементам, вы также можете проверить, есть ли у элемента дочерние элементы, которые соответствуют определенному селектору, например, если вы хотите увидеть, есть ли у элемента дочерний элемент определенного класса.
Muhd
11
незначительная проблема. Я не имею в виду ничтожество, но его children().lengthследует вызывать вместо size () для jQuery-документов здесь: api.jquery.com/size
Брайан Чавес,
4
А что, если узел содержит только текст?
botenvouwer
1
@sirwilliam Узел вернется с длиной 0.
Meki
54

Этот фрагмент определит, есть ли у элемента дочерние элементы, используя :parentселектор:

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

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

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

dcharles
источник
2
Да, я думаю, что этот ответ более элегантный, чем ответ С. Пангборна. Оба абсолютно законны, хотя.
KyleFarris
1
@Milo LaMar, я подозреваю, что разница в производительности невелика, но единственный способ убедиться в этом - попробовать! Кроме того, вам придется убрать пробел между #myfavи :parentв вашем примере, иначе селектор будет отличаться от того, что предоставил бы мой ответ.
dcharles
3
Очень небольшое количество чтения ответило мне достаточно. Взято с 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").
Мило Ламар
6
результаты теста производительности за 0,002 с - я предпочитаю этот способ, потому что он лучше читается ...
dtrunk
1
Я в замешательстве, разве это не лучший ответ?
Андрей Кристиан Продан
47

Другой вариант, просто так, черт побери:

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

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

KyleFarris
источник
16

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

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

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

Саймон
источник
$(...)[0] is undefinedэто может произойти, если #myfavне найден. Я бы проверить существование первого совпавшего элемента до применения этого состояния, то есть: $('#myfav')[0] && $('#myfav')[0].hasChildNodes().
CPHPython
13

и если вы хотите проверить, есть ли у div ребята из черепа (например, <p>используйте:

if ($('#myfav').children('p').length > 0) {
     // do something
}
suhailvs
источник
7

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

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

}
Ракеш Чаудхари
источник
4

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>
Развернуть фрагмент

Джон Слегерс
источник