.parent(), .parents() dan .children() pada JQuery

.parent() digunakan untuk menyeleksi elemen induk terdekat. 

.parents() digunakan untuk menyeleksi elemen induk pada level tertentu. 

.children() digunakan untuk menyeleksi anak elemen terdekat.

Kita mulai dengan .parent(). Misalnya kita mempunyai list seperti ini:

<ul>

    <li>Item 1</li>

    <li>Item 2</li>

    <li><a href="#">Item 3</a></li>

    <li>Item 4</li>

</ul>

Jika kita ingin menyeleksi elemen induk terdekat dari <a> agar dikenai CSS border berupa border:1px dotted black, maka yang perlu Anda lakukan adalah seperti ini:

$('a').parent().css('border', '1px dotted black');

Dengan begitu, elemen <li> yang menjadi induk dari elemen tersebut akan dikenai border dotted berwarna hitam. Namun berbeda dengan .parents(). Saat kita menggunakan .parents(), kita bisa bebas menentukan elemen induk level berapapun:

$('a').parents('ul').css('border', '1px dotted black');

Kode di atas tidak akan menyeleksi elemen <li> yang menjadi induk dari elemen <a> melainkan akan mengenai elemen <ul> yang menjadi elemen induk dari <a> dan juga <li>.

Untuk contoh bisa dilihat pada link  berikut

Sample .parent()

.children() hanya akan menyeleksi anak elemen level pertama saja, sedangkan anak elemen sejenis di bawahnya/di dalamnya tidak akan ikut terkena:

$('#luar').children().addClass('children');

Kode di atas akan menambahkan kelas children pada anak level pertama dari elemen #luar, sedangkan elemen-elemen selain anak pertama akan diabaikan.

Untuk contoh bisa dilihat pada link berikut

Sample .children()

Sumber