JQuery parent (), ebeveyn () ve en yakın () işlevler arasındaki fark


184

Bir süredir jQuery kullanıyorum. parent()Seçiciyi kullanmak istedim . Ben de closest()seçiciyle geldim . Aralarında bir fark bulunamadı. Var mı? Evet ise, ne?

Ne arasındaki farktır parent(), parents()ve closest()?


6
ebeveyn :::: ebeveyn için 1 adım geri gider .... :::: ebeveyn ::: tüm ebeveynlerin bir listesini verir .... :::: en yakın ::: durumu bulana kadar kardeşler arasında geri gider ve sadece ilkini geri getirin. Tüm bunlar ek seçicilerle değiştirilebilir
Muhammad Umer

Yanıtlar:


177

closest()DOM ağacından seçiciyle eşleşen ilk öğeyi seçer. Geçerli öğeden başlar ve yukarı doğru hareket eder.

parent() DOM ağacından bir öğe yukarı (tek düzey yukarı) seçer.

parents()yöntemi parent()DOM öğesine benzer ancak DOM ağacındaki tüm eşleşen öğeleri seçer. Üst öğeden başlar ve yukarı doğru hareket eder.


10
Tüm unsurları alan .parents()(yerine .parent()) değil mi?
acdcjunior

65
Bu cevabın önemli bir noktası eksik: "En yakın", geçerli elemanla başlar ve yukarı çıkar; burada "Ebeveynler", ana elemanla başlar ve yukarı gider.
Andrew

196

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

.Parents () ve .closest () yöntemleri benzer onlar DOM ağacı kadar her iki hareket. İkisi arasındaki fark, ince olsa da, önemlidir:

.closest ()

  • Geçerli öğeyle başlar
  • Ürünle birlikte verilen seçici için bir eşleşme bulana kadar DOM ağacında dolaşır
  • Döndürülen jQuery nesnesi sıfır veya bir öğe içeriyor

.ebeveynler()

  • Üst öğe ile başlar
  • DOM ağacını belgenin kök öğesine gider ve her bir üst öğeyi geçici bir koleksiyona ekler; daha sonra bu koleksiyonu, varsa bir seçiciye göre filtreler
  • Döndürülen jQuery nesnesi sıfır, bir veya birden çok öğe içeriyor

.parent ()

  • Bir DOM öğesi kümesini temsil eden bir jQuery nesnesi verildiğinde, .parent () yöntemi, DOM ağacındaki bu öğelerin üst öğelerini aramamıza ve eşleşen öğelerden yeni bir jQuery nesnesi oluşturmamıza olanak tanır.

Not: .parents () ve .parent () yöntemleri benzerdir, ancak ikincisi DOM ağacında yalnızca bir düzey seyahat eder. Ayrıca, $ ("html"). Parent () yöntemi, belgeyi içeren bir kümeyi döndürürken $ ("html"). Ebeveyn () boş bir kümeyi döndürür.

İşte ilgili konular:


8
Aslında ebeveynleri () değil, ebeveynleri () sordu.
ScubaSteve

2
@ScubaSteve: Lütfen cevabı tekrar kontrol edin Note.
Nefret

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.
Nefret

1
@ScubaSteve, evet, ancak ebeveynlerin () sorusu daha ilginç.
Paul Draper

15

İkisi arasındaki fark, ince olsa da, önemlidir:

.closest ()

  • Geçerli öğeyle başlar
  • Ürünle birlikte verilen seçici için bir eşleşme bulana kadar DOM ağacında dolaşır
  • Döndürülen jQuery nesnesi sıfır veya bir öğe içeriyor

.ebeveynler()

  • Üst öğe ile başlar
  • DOM ağacını belgenin kök öğesine gider ve her bir üst öğeyi geçici bir koleksiyona ekler; daha sonra bu koleksiyonu, varsa bir seçiciye göre filtreler
  • Döndürülen jQuery nesnesi sıfır, bir veya birden çok öğe içeriyor

JQuery dokümanlarından


13
Ben senin açıklayan .parents () burada düşünüyorum
Muhammed Umer

1

Her ikisi $(this).closest('div')ve arasında$(this).parents('div').eq(0)

Temel olarak closestöğeyi geçerli öğeden parentseşleştirmeye başlarken öğeleri üst öğeden eşleştirmeye başlar (geçerli öğenin bir düzey üstünde)

See http://jsfiddle.net/imrankabir/c1jhocre/1/

0

parent()yöntemi, seçilen öğenin doğrudan üst öğesini döndürür. Bu yöntem yalnızca bir çapraz tek DOM ağacının yukarı seviyeye.

parents()yöntemi , DOM ağacındaki bu öğelerin atalarını aramamıza olanak tanır . Verilen seçiciden başlayın ve yukarı gidin.

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





 

-1

$(this).closest('div')ile aynıdır $(this).parents('div').eq(0).


9
Değil, eğer $ (bu) da bir div ise.
Frank Fajardo
Sitemizi kullandığınızda şunları okuyup anladığınızı kabul etmiş olursunuz: Çerez Politikası ve Gizlilik Politikası.
Licensed under cc by-sa 3.0 with attribution required.