Singkat saja, .parent() dipakai untuk menyeleksi elemen induk terdekat. .parents() dipakai untuk menyeleksi elemen induk pada level tertentu. .children() dipakai untuk menyeleksi anak elemen terdekat.
Kita mulai dengan .parent(). Katakanlah kita memiliki sebuah elemen daftar ibarat ini:
<ul> <li>Item daftar</li> <li>Item daftar</li> <li><a href="#">Daftar dalam tautan</a></li> <li>Item daftar</li> </ul>Jika kita ingin menyeleksi elemen induk terdekat dari <a> biar dikenai CSS border berupa border:1px dotted black, maka yang perlu Anda lakukan yaitu ibarat 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 memakai .parents(), kita dapat bebas memilih 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>
.children() tidak akan menciptakan Anda bingung. Ini hanya akan menyeleksi anak elemen level pertama saja, sedangkan anak elemen sejenis di bawahnya/di dalamnya tidak akan ikut terkena:
$('#outer').children().addClass('children');Kode di atas akan menambahkan kelas children pada anak level pertama dari elemen #outer, sedangkan elemen-elemen selain anak pertama akan diabaikan:
Cara kerja .children() intinya sama dengan selektor CSS3 ">" yang akan menyeleksi anak elemen terdekat saja:
$('#outer > div').addClass('children');Anda dapat memakai cara di atas atau juga memakai cara .children(). Semuanya tergantung keadaan.