202

Ini if-condition adalah apa yang memberi masalah saya:

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

Saya mencoba semua yang berikut:

if ( $('#myfav:hasChildren') ) { do something }
if ( $('#myfav').children() ) { do something }
if ( $('#myfav:empty') ) { do something }
if ( $('#myfav:not(:has(*))') ) { do something }

jquery children

— Chris
sumber

441

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

Ini seharusnya bekerja. The children()mengembalikan fungsi objek JQuery yang berisi anak-anak. Jadi, Anda hanya perlu memeriksa ukuran dan melihat apakah memiliki setidaknya satu anak.

— S Pangborn
sumber

1

Terima kasih atas jawabannya. Inilah yang bekerja untuk saya. Saya tahu saya berada di jalur yang benar dengan .children (), tetapi tidak tahu apa yang salah dengannya. Ternyata ukurannya bisa 0, masuk akal.

— Chris

2

Jika Anda menambahkan pemilih ke anak-anak, Anda juga dapat memeriksa apakah suatu elemen memiliki anak yang cocok dengan pemilih tertentu, seperti jika Anda ingin melihat apakah suatu elemen memiliki anak dari kelas tertentu.

— Muhd

11

masalah kecil. tidak bermaksud melakukan nitpick tetapi children().lengthharus dipanggil alih-alih size () per jQuery docs di sini: api.jquery.com/size

— Brian Chavez

4

Dan bagaimana jika simpul hanya berisi teks !?

— botenvouwer

1

@sirwilliam Node akan kembali dengan 0 panjang.

— Meki

54

Cuplikan ini akan menentukan apakah elemen memiliki anak menggunakan :parentpemilih:

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

Catatan yang :parentjuga menganggap elemen dengan satu atau lebih simpul teks sebagai induk.

Dengan demikian divelemen - elemen dalam <div>some text</div>dan <div><span>some text</span></div>masing-masing akan dianggap sebagai induk tetapi <div></div>bukan induk.

— dcharles
sumber

2

Ya, saya pikir jawaban ini lebih elegan daripada S Pangborn. Keduanya sepenuhnya sah.

— KyleFarris

1

@Milo LaMar, saya menduga tidak ada banyak perbedaan kinerja, tetapi satu-satunya cara untuk memastikan adalah mencobanya! Selain itu, Anda harus menghapus ruang antara #myfavdan :parentdalam contoh Anda, jika pemilih tidak sama dengan apa yang akan diberikan jawaban saya.

— dcharles

3

Sejumlah kecil bacaan menjawab cukup bagi saya. Diambil dari 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").

— Milo LaMar

6

hasil tes kinerja dalam 0,002s - saya lebih suka cara ini, karena itu paling baik dibaca ...

— dtrunk

1

Saya bingung, bukankah ini jawaban terbaik?

— Andrei Cristian Prodan

47

Pilihan lain, hanya untuk itu adalah:

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

Mungkin sebenarnya yang tercepat karena hanya menggunakan mesin Sizzle dan tidak perlu jQuery. Bisa jadi salah. Namun demikian, itu berhasil.

— KyleFarris
sumber

16

Sebenarnya ada metode asli yang cukup sederhana untuk ini:

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

Perhatikan bahwa ini juga termasuk simpul teks sederhana, jadi itu benar untuk a <div>text</div>.

— Simon
sumber

$(...)[0] is undefinedini dapat terjadi jika #myfavtidak ditemukan. Aku akan menguji keberadaan elemen pertama cocok sebelum menerapkan kondisi itu, yaitu: $('#myfav')[0] && $('#myfav')[0].hasChildNodes().

— CPHPython

13

dan jika Anda ingin memeriksa div memiliki anak yang bermasalah (katakan <p>gunakan:

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

— suhailvs
sumber

7

Anda juga dapat memeriksa apakah div memiliki anak tertentu atau tidak,

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

}

— Rakesh Chaudhari
sumber

4

Cara jQuery

Di jQuery, Anda bisa menggunakan $('#id').children().length > 0 untuk menguji apakah suatu elemen memiliki anak.

Demo

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>

Luaskan cuplikan

Cara vanilla JS

Jika Anda tidak ingin menggunakan jQuery, Anda bisa menggunakan document.getElementById('id').children.length > 0 untuk menguji apakah suatu elemen memiliki anak.

Demo

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>

Luaskan cuplikan

— John Slegers
sumber

jquery jika div id punya anak

Cara jQuery

Demo

Cara vanilla JS

Demo