Perbedaan antara fungsi jQuery parent (), parent () dan terdekat ()

184

Saya telah menggunakan jQuery untuk sementara waktu. Saya ingin menggunakan parent()pemilih. Saya juga datang dengan closest()pemilih. Tidak dapat menemukan perbedaan di antara mereka. Apakah ada? Jika ya, apa?

Apa perbedaan antara parent(), parents()dan closest()?

jquery Sajjan Gurung
sumber
6
parent :::: melakukan perjalanan 1 langkah kembali ke parent .... :::: parents ::: memberikan daftar semua orang tua .... :::: terdekat ::: melakukan perjalanan kembali melalui saudara kandung sampai menemukan kondisi dan hanya mengembalikan yang pertama. Semua ini dapat dimodifikasi dengan penyeleksi tambahan
Muhammad Umer

Jawaban:

177

closest()memilih elemen pertama yang cocok dengan pemilih, naik dari pohon DOM. Dimulai dari elemen saat ini dan naik.

parent() memilih satu elemen ke atas (satu tingkat ke atas) pohon DOM.

parents()Metode ini mirip dengan parent()tetapi memilih semua elemen yang cocok di pohon DOM. Dimulai dari elemen induk dan berjalan naik.

Subash
sumber
10
Bukankah .parents()(alih-alih .parent()) yang mengambil semua elemen?
acdcjunior
65
Jawaban ini tidak memiliki poin penting: "Terdekat" dimulai dengan elemen saat ini dan naik, sedangkan "Orangtua" dimulai dengan elemen induk dan naik.
Andrew
196

dari http://api.jquery.com/closest/

Metode .parents () dan .closest () serupa karena keduanya melintasi pohon DOM. Perbedaan antara keduanya, meskipun halus, adalah signifikan:

.closest ()

  • Dimulai dengan elemen saat ini
  • Perjalanan naik pohon DOM sampai menemukan kecocokan untuk pemilih yang disediakan
  • Objek jQuery yang dikembalikan berisi nol atau satu elemen

.orangtua()

  • Dimulai dengan elemen induk
  • Melakukan perjalanan ke atas pohon DOM ke elemen root dokumen, menambahkan setiap elemen leluhur ke koleksi sementara; kemudian menyaring koleksi itu berdasarkan pemilih jika ada yang disediakan
  • Objek jQuery yang dikembalikan berisi nol, satu, atau beberapa elemen

.induk()

  • Diberikan objek jQuery yang mewakili sekumpulan elemen DOM, metode .parent () memungkinkan kita untuk mencari melalui orang tua elemen-elemen ini di pohon DOM dan membangun objek jQuery baru dari elemen yang cocok.

Catatan: Metode .parents () dan .parent () serupa, kecuali bahwa yang terakhir hanya naik satu tingkat ke atas pohon DOM. Juga, metode $ ("html"). Parent () mengembalikan set yang berisi dokumen sedangkan $ ("html"). Parents () mengembalikan set kosong.

Berikut adalah utas terkait:

Naveed
sumber
8
Dia sebenarnya bertanya tentang orang tua (), bukan orang tua ().
ScubaSteve
2
@ScubaSteve: Silakan periksa jawabannya lagi dengan Note.
Naveed
1
The .parents() and .parent() methods are similar, except that the latter only travels a single level up the DOM tree. Also, $("html").parent() method returns a set containing document whereas $("html").parents() returns an empty set.
Naveed
1
@ ScubaSteve, yeah, tapi pertanyaan orang tua () lebih menarik.
Paul Draper
15

Perbedaan antara keduanya, meskipun halus, adalah signifikan:

.closest ()

  • Dimulai dengan elemen saat ini
  • Perjalanan naik pohon DOM sampai menemukan kecocokan untuk pemilih yang disediakan
  • Objek jQuery yang dikembalikan berisi nol atau satu elemen

.orangtua()

  • Dimulai dengan elemen induk
  • Melakukan perjalanan ke atas pohon DOM ke elemen root dokumen, menambahkan setiap elemen leluhur ke koleksi sementara; kemudian menyaring koleksi itu berdasarkan pemilih jika ada yang disediakan
  • Objek jQuery yang dikembalikan berisi nol, satu, atau beberapa elemen

Dari jQuery docs

antyrat
sumber
13
Saya pikir Anda menggambarkan .parents () di sini
Muhammad Umer
1

Ada perbedaan antara keduanya $(this).closest('div')dan$(this).parents('div').eq(0)

Pada dasarnya closestmulai elemen yang cocok dari elemen saat ini sedangkan parentsmulai elemen yang cocok dari induk (satu tingkat di atas elemen saat ini)

See http://jsfiddle.net/imrankabir/c1jhocre/1/
Imran Kabir
sumber
0

parent()Metode mengembalikan elemen induk langsung dari yang dipilih. Metode ini hanya melintasi satu tingkat ke atas pohon DOM.

parents()Metode memungkinkan kita untuk mencari leluhur unsur-unsur ini di pohon DOM. Mulai dari pemilih yang diberikan dan naik.

The **.parents()** and **.parent()** methods are almost similar, except that the latter only travels a single level up the DOM tree. Also, **$( "html" ).parent()** method returns a set containing document whereas **$( "html" ).parents()** returns an empty set.

[closest()][3]method returns the first ancestor of the selected element.An ancestor is a parent, grandparent, great-grandparent, and so on.

This method traverse upwards from the current element, all the way up to the document's root element (<html>), to find the first ancestor of DOM elements.

According to docs:

**closest()** method is similar to **parents()**, in that they both traverse up the DOM tree. The differences are as follows:

**closest()**

Begins with the current element
Travels up the DOM tree and returns the first (single) ancestor that matches the passed expression
The returned jQuery object contains zero or one element

**parents()**

Begins with the parent element
Travels up the DOM tree and returns all ancestors that matches the passed expression
The returned jQuery object contains zero or more than one element
Vaibhav Sharma
sumber
-1

$(this).closest('div')sama dengan $(this).parents('div').eq(0).

hsuk
sumber
9
Tidak cukup, jika $ (ini) juga merupakan div.
Frank Fajardo