jQuery gezinme - find() yöntemi

jQuery Tarama Kılavuzu

Örnek

Bütün paragraflardaki soy span elementlerini arar ve renklerini kırmızıya ayarlar:

$("p").find("span").css('color','red');

Kişisel olarak deneyin

Tanım ve kullanım

find() yöntemi, her elementin soyunu seçici ifade, jQuery nesnesi veya element aracılığıyla süzgeçten geçirir.

Sözdizimi

.find(selector)
Parametre Açıklama
selector İfade, mevcut element koleksiyonunu eşleyen seçici ifadeyi içeren bir dizi karakterdir.

Ayrıntılı açıklama

Bir DOM element koleksiyonunu temsil eden bir jQuery nesnesi verildiğinde, .find() yöntemi bu elementlerin DOM ağacındaki soy elementlerini aramamıza olanak tanır ve bu elementlerle yeni bir jQuery nesnesi oluşturur. .find() yöntemi .children() yöntemine benzer, ancak sonuncusu sadece DOM ağacında tek bir seviyeye doğru ilerler.

.find() yönteminin ilk belirgin özelliği, $() fonksiyonuna ilettiğimiz ifadelerin türü ile aynı seçici ifadeyi kabul etmesidir. Bu ifadeye uygun olup olmadıklarını test ederek elementleri süzgeçten geçirir.

Aşağıdaki basit iç içe listeyi düşünün:

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

Liste II'den başlayarak içindeki list itemlerini aramaya başlayacağız:

$('li.item-ii').find('li').css('background-color', 'red');

Kişisel olarak deneyin

Bu araştırma sonucu, Proje A, B, 1, 2, 3 ve C'nin tümünün kırmızı arka plan olarak ayarlandığı ortaya çıkmıştır. Proje II, seçici ifadeye uyduğunda bile sonuçlara dahil edilmez; sadece soy elementlere uyulur.

Diğer ağaç tarayım yöntemlerinden farklı olarak, .find() için seçici ifadesi zorunludur. Tüm soy elementlerine erişim sağlamak için joker seçici '*' geçilebilir.

Seçici context, .find() yöntemi tarafından gerçekleştirilir; bu yüzden, $('li.item-ii').find('li') $('li', 'li.item-ii')'e eşittir.

jQuery 1.6 için, belirli bir jQuery kümesi veya elementi kullanarak süzme yapabiliriz. Hala yukarıdaki iç içe list, şöyle yazabiliriz:

var $allListElements = $('li');

Sonra bu jQuery nesnesini find yöntemine geçirin:

$('li.item-ii').find( $allListElements );

Kişisel olarak deneyin

Yukarıdaki kod, list II'nin soy元素的 list elementlerini içeren bir jQuery kümesi döndürecektir.

Benzer şekilde, bir element de geçirebilirsiniz:

var item1 = $('li.item-1')[0];
$('li.item-ii').find( item1 ).css('background-color', 'red');

Kişisel olarak deneyin

Bu çağrının sonucu, Proje 1'nin kırmızı arka plan olarak ayarlandığıdır.

jQuery Tarama Kılavuzu