.parents()

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

.parents( [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, .parents() metodu her bir elemanın atalarını birleştirerek yeni bir jQuery nesnesi döner. Elemanlar en yakın olandan en dıştakine doğru sırayla gelirler. Orjinal sette birçok DOM elemanı verildiğinde sonuç set orjinalin tersine doğru sıralı ve aynı elemnlar tekrarlanmayacak şekilde olur.

Bu metod .parent() 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 ata 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").parents().not("div, body, html")
.css("background-color", "red");
  • I
  • II
    • A
    • B
      • 1
      • 2
      • 3
    • C
  • III

O .not() olmasa tüm sayfa kırmızı olacaktı.



Örnekler:

Her b elemanın atalarını bul.

<style>
   b, span, p {
      padding: .5em;
      border: 1px solid;
   }
   b { color: blue; }
   strong { color: red; }
</style>
<div>
   <p>
      <span>
         <b>My parents are: </b>
      </span>
   </p>
</div>
 
<script>
   var parentEls = $("b").parents()
      .map(function() {
         return this.tagName;
      })
      .get()
      .join(", ");
   $("b").append("<strong>" + parentEls + "</strong>");
</script>

My parents are:


Her span elemanına tıklanınca atalarını belirt eme aynı ata için iki defa tekrarlama.

<style>
   p, box, span {
      margin: 2px; padding: 1px;
   }
   box {
      border: 2px white solid;
      display: block;
   }
   span {
      cursor: pointer; font-size: 12px;
   }
   .selected { color: blue; }
   b {
      color: red; display: block;
      font-size: 14px;
   }
</style>
<p>
   <box>
      <box><span>Merhaba</span></box>
      <span>Yine Merhaba</span>
   </box>
   <box>
      <span>ve Yine Merhaba</span>
   </box>
</p>
<b>Atalarını görmek için "merhaba" lara tıkla.</b>
<script>
   function showParents() {
      $("box").css("border-color", "white");
      var len = $("span.selected")
         .parents("box")
         .css("border", "2px red solid")
         .length;
      $("b").text("Tekrarlanmayan box sayısı: " + len);
   }
   $("span").on("click", function() {
      $(this).toggleClass("selected");
      showParents();
   });
</script>

Merhaba Yine Merhaba ve Yine Merhaba

Atalarını görmek için "merhaba" lara tıkla.

Daha net belli olsun diye <box> sahte HTML elemanı kullandık.

.

.