Jquery .closest() Metodu

Seçtiğimiz elementin üst nesnesini bulmamızı sağlar. Genelde listelemelerde kullanılır, yani en azından ben öyle yapıyorum 🙂 Bu method ile istediğimiz seviyedeki elemanlara kolayca erişebiliyoruz.

.closest() metodu kullanımı

$( selector ).closest( parentElement );

Şimdi bu method için basit bir senaryo hazırlayalım.

Bu senoryoda, LI ögelerine hover ettiğimde ilgili ögenin üst UL nesnesine çıkarak buna sınıf ataması yapıyorum.

HTML

<div class="menu-wrapper">
    <ul>
        <li>List item 1</li>
        <li>List item 2</li>
        <li>List item 3</li>
    </ul>
    <ul>
        <li>List item 1</li>
        <li>List item 2</li>
        <li>List item 3</li>
    </ul>
    <ul>
        <li>List item 1</li>
        <li>List item 2</li>
        <li>List item 3</li>
    </ul>
</div>

JQuery

$(function(){
    $('.menu-wrapper ul li').hover(function(){
    	$('.menu-wrapper ul').removeClass('hover-active');
    	$(this).closest('ul').addClass('hover-active');
    });
});

Çalışan örneği inceleyin.

Yayınlayan

Uğur Özgen

2012 yılından beri web tasarım ile ilgileniyorum. Son 3 senedir profesyonel anlamda bu işi yapıyorum. İşimi çok seviyorum ve her zaman güncel kalmaya çalışıyorum.

Bir Cevap Yazın

E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir