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 }

Відповіді:


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

Це має спрацювати. children()Функція повертає об'єкт JQuery, що містять дитина. Тому вам просто потрібно перевірити розмір і подивитися, чи є у нього хоча б одна дитина.


1
Дякую за відповідь. Це те, що працювало для мене. Я знав, що я на вірному шляху з .children (), але не знав, що з цим не так. Мабуть, розмір може бути 0, має сенс.
Кріс

2
Якщо ви додаєте селектор для дітей, ви також можете перевірити, чи є в елементах діти, які відповідають певному селектору, наприклад, якщо ви хочете побачити, чи є у елемента дочірня певного класу.
Мухд

11
другорядне питання. не означає nitpick, але його children().lengthслід викликати замість розміру () для jQuery документів тут: api.jquery.com/size
Брайан Чавес

4
А що робити, якщо вузол містить лише текст !?
botenvouwer

1
@sirwilliam Вузол повернеться з 0 довжиною.
Мекі

54

Цей фрагмент визначає, чи є у елемента діти, які використовують :parentселектор:

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

Зауважте, що :parent також вважає батьківським елементом з одним або декількома текстовими вузлами.

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


2
Так, я вважаю, що ця відповідь є більш елегантною, ніж відповідь S Pangborn. І те, і інше є повністю законним.
KyleFarris

1
@Milo LaMar, я б підозрював, що різниця в продуктивності не є великою, але єдиний спосіб бути впевненим - це спробувати! Крім того, вам доведеться видалити пробіл між #myfavі :parentу вашому прикладі, інакше селектор не такий, як мій відповідь.
грудня

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. Можливо, помиляюся. Тим не менш, це працює.


16

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

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

Зауважте, що це також включає прості текстові вузли, тому це буде правдою для <div>text</div>.


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

13

і якщо ви хочете перевірити, чи є діва пертикулярні діти (скажіть, <p>використовуйте:

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

7

Ви також можете перевірити, чи є у конкретних дітей конкретні діти чи ні,

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>

Використовуючи наш веб-сайт, ви визнаєте, що прочитали та зрозуміли наші Політику щодо файлів cookie та Політику конфіденційності.
Licensed under cc by-sa 3.0 with attribution required.