jQuery Gezinti - closest() Yöntemi

jQuery Keşif Kılavuzu

Örnek

Bu örnek, closest() ile olay devrediyi nasıl gerçekleştirdiğini gösterir. En yakın listeleme elementi veya onun alt nesneleri tıklandığında, sarı arka plan değiştirilir:

$( document ).bind("click", function( e ) {
    $( e.target ).closest("li").toggleClass("hilight");
  });

Kişisel olarak deneyin

Tanım ve kullanım

.closest() yöntemi, seçiciye sahip ilk ata elementini elde eder, mevcut elementten DOM ağacına doğru yukarı doğru gezinir.

Sözdizimi

.closest(selector)
Parametre Açıklama
selector Eşleşen elementin seçici ifadesini içeren bir dizi değer.

Ayrıntılı açıklama

DOM elementi koleksiyonunu temsil eden bir jQuery nesnesi verildiğinde, .closest() yöntemi, bu elementleri ve ata elementlerini DOM ağacında arar ve bu eşleşen elementlerle yeni bir jQuery nesnesi oluşturur..parents() .closest() yöntemiyle benzer, her ikisi de DOM ağacına doğru yukarı doğru gezinir. Aralarındaki farklar küçük olsa da önemlidir:

.closest() .parents()
Mevcut elementten başlayarak Ana elementten başlayarak
DOM ağacına doğru yukarı doğru gezin, bir seçiciye sahip bir eşleşme bulana kadar. DOM ağacına doğru yukarı doğru gezin, belgenin kök elemanına kadar, her ata elementi geçici bir koleksiyona ekleyin; bir seçici uygulandığında, bu koleksiyona bu seçiciye göre filtreleme yapılır.
Sıfır veya bir eleman içeren jQuery nesnesi döndürür Sıfır, bir veya birden fazla eleman içeren jQuery nesnesi döndürür

Aşağıdaki HTML parçasına bakın:

<ul id="one" class="level-1">
  <li class="item-i">I</li>
  <li id="ii" 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>

Örnek 1

Project A'dan başlayarak <ul> elementi için bir arama gerçekleştirdiğimiz varsayalım ki:

$('li.item-a').closest('ul').css('background-color', 'red');

Kişisel olarak deneyin

Bu, level-2 <ul> rengini değiştirir, çünkü DOM ağacını yukarı doğru tarama sırasında ilk karşılaşılan elementtir.

Örnek 2

Aranan <li> elementi için varsayalım ki:

$('li.item-a').closest('li').css('background-color', 'red');

Kişisel olarak deneyin

Bu, list item A'nın rengini değiştirir. .closest() metodu DOM ağacını yukarı doğru taramadan önce li elementinden başlayarak, project A'ya kadar seçiciye kadar arar.

Örnek 3

DOM elementi olarak bir context geçirebilir ve bu context içinde en yakın elementi arayabiliriz.

var listItemII = document.getElementById('ii');
$('li.item-a').closest('ul', listItemII).css('background-color', 'red');
$('li.item-a').closest('#one', listItemII).css('background-color', 'green');

Kişisel olarak deneyin

Yukarıdaki kod level-2 <ul> rengini değiştirir çünkü hem list item A'nın ilk <ul> atası hem de list item II'nin soyu olan bir unsurdur. level-1 <ul> rengini değiştirmez çünkü list item II'nin soyu değildir.

jQuery Keşif Kılavuzu