Jquery closest() Kullanımı
Jquery 28 Nisan, 2020

Merhabalar,

Jquery veya javascript ile html sayfasındaki elementleri bulup işlemler yaparız. Eventler veririz, css classları ekleriz vs. 

Örnek olarak html sayfamızda bunlar olsun.

<ul>(first grandparent)
    <li> (direct parent)
       <span>span</span>
    </li>
</ul>

Elementi bulurken genellikle elementin "id" property sini kullanırız veya x elementinin altındaki y elementi şeklinde yazarız. Mesela şunun gibi:

var elem = $("li span");

Peki y elementinden x elementine nasıl ulaşırız? Her zaman elimizde id property si olmayabilir bazen sadece className olabilir.

Burada closest() metodu tam istediğimiz işlemi yapıyor. Geçerli elementten başlıyor ve verilen filtreye göre bulunan ilk parent elementi döndürüyor.

Bu işlem için parents() metodu da kullanılabilir ancak x ile y arasında başka elementler varsa veya arada kaç tane element olduğu bilinmiyorsa bu metot işimize yaramaz.

Aşağıdaki kodla span elementinin parentlarından bulunan ilk ul elementinin text'i değiştiriliyor.

$("span").closest("ul").text("closest example");

Kodlamaya devam!


Yorumlar

Jquery closest() Kullanımı
Jquery 28 Nisan, 2020

Merhabalar,

Jquery veya javascript ile html sayfasındaki elementleri bulup işlemler yaparız. Eventler veririz, css classları ekleriz vs. 

Örnek olarak html sayfamızda bunlar olsun.

<ul>(first grandparent)
    <li> (direct parent)
       <span>span</span>
    </li>
</ul>

Elementi bulurken genellikle elementin "id" property sini kullanırız veya x elementinin altındaki y elementi şeklinde yazarız. Mesela şunun gibi:

var elem = $("li span");

Peki y elementinden x elementine nasıl ulaşırız? Her zaman elimizde id property si olmayabilir bazen sadece className olabilir.

Burada closest() metodu tam istediğimiz işlemi yapıyor. Geçerli elementten başlıyor ve verilen filtreye göre bulunan ilk parent elementi döndürüyor.

Bu işlem için parents() metodu da kullanılabilir ancak x ile y arasında başka elementler varsa veya arada kaç tane element olduğu bilinmiyorsa bu metot işimize yaramaz.

Aşağıdaki kodla span elementinin parentlarından bulunan ilk ul elementinin text'i değiştiriliyor.

$("span").closest("ul").text("closest example");

Kodlamaya devam!


Benzer Yazılar

Yorumlar