.parent()

.parent( [selector ] ) Dönen Değer : jQuery Nesnesi
Açıklama : Bulunulan setteki her elemanın ebeveynini getirir, eğer verilmişse ebeveynler de bir seçici ile filtre edilebilir.

.parent( [selector ] ) Eklendiği Versiyon 1.0
selector
Tip : Seçici Deyim
Sonucun filtreleneceği bir seçici deyim.

DOM elemanlarından oluşan bir jQuery nesnesi verildiğinde, .parent() metodu her bir elemanın ebeveynini birleştirerek yeni bir jQuery nesnesi döner.

Bu metod .parents() metoduna benzer, ama .parent() sadece bir seviye yukarıdaki ebeveyni alır, daha yukarı çıkmaz. Ayrıca $("html").parent() çağrısı size document nesnesini dönerken, $("html").parents() boş bir set döner.

Bu metod opsiyonel olarak $() seçicisi gibi bir jQuery seçici parametresi alabilir. Eğer seçici verilmişse bulunan ebeveyn elemanlar bu seçiciye uygun filtre edilirler.

İçiçe listelerden oluşan bir sayfa düşünelim.

<ul class="level-1">
   <li class="item-i">I</li>
   <li class="item-ii">II
      <ul class="level-2">
         <li class="item-a">A</li>
         <li class="item-b">B
         <ul class="level-3">
            <li class="item-1">1</li>
            <li class="item-2">2</li>
            <li class="item-3">3</li>
         </ul>
         </li>
         <li class="item-c">C</li>
      </ul>
   </li>
   <li class="item-iii">III</li>
</ul>

A elemanıyla başlayıp ebeveynini bulalım.

$("li.item-a").parent().css("background-color", "red");
  • I
  • II
    • A
    • B
      • 1
      • 2
      • 3
    • C
  • III

Bu kod tüm level-2 listesinin arkasını kırmızıya boyar.



Örnekler:

Her elemanı ebeveyni ile beraber "parent > child" şeklinde belirt.

<style>
   div, p { margin: 10px; }
</style>
<div>div,
   <span>span, </span> <b>b </b>
</div>
<p class="">p,
   <span>span,
      <em>em </em>
   </span>
</p>
<div>div,
   <strong>strong,
      <span>span, </span>
      <em>em,
         <b>b, </b>
      </em>
   </strong>
   <b>b </b>
</div>
<script>
   $("*", document.body).each(function() {
      var parentTag = $(this).parent().get(0).tagName;
      $(this).prepend(document.createTextNode(parentTag + " > "));
   });
</script>
div, span, b

p, span, em

div, strong, span, em, b, b

Örnek burada bir <div> elemanı içinde kodlandığı için her satırın en başında DIV yazıyor eğer döküman root'da yazılmış olsa en üstte hep BODY yazacaktı.

"select" sınıf değerine sahip ebeveyni olan paragrafların ebeveynini fosforlu kalemle işaretle.

<div><p>Hello</p></div>
<div class="selected"><p>Hello Again</p></div>
 
<script>
   $("p").parent(".selected").css("background", "yellow");
</script>

Hello

Hello Again

.

.