JQuery – parent Fonksiyonu İle Üst Elemanlara Ulaşmak

HTML nesnelerine dinamik bir şekilde ulaşmamızı sağlayan JQuery ile ulaştığımız o anki nesnenin bulunduğu üst elemanlara ulaşmayı parent fonksiyonu ile gerçekleştirebilir.Bu makalemizin içeriği bu fonksiyonun geniş kullanımını içermektedir.

<div id="UstDiv">
    <span id="BilgiA">Bilgi A</span>
    <div id="OrtaDiv">
        <span id="BilgiB">Bilgi B</span>
        <div id="AltDiv">
            <a href="#" id="LinkA" name="1">Link A</a>
            <a href="#" id="LinkB" name="2">Link B</a>
        </div>
    </div>
</div>

Yukarıdaki HTML kod bloğunu örnek olarak ele alacağız.

<script type="text/javascript">
    $(document).ready(function () {
        $("#LinkB").click(function () {
            var ID = $(this).attr('name');
            alert(ID);
        });
    });
</script>

Burada, id değeri “LinkB” olan nesneye tıklandığında name özelliğinde bulunan değeri alıp alert metoduyla yazdırmış olduk.

Peki, ben aynı nesneye tıklandığı zaman o nesneden çıkıp id değeri “LinkA” olan nesneye nasıl ulaşabilirim?

<script type="text/javascript">
    $(document).ready(function () {
        $("#LinkB").click(function () {
            var LinkA = $(this).parent("div").find("#LinkA");
            var ID = LinkA.attr('name');
            alert(ID);
        });
    });
</script>

Burada gördüğünüz gibi, id değeri “LinkB” olan elemana tıklandığı zaman, id değeri “LinkA” olan elemana ulaşılıp name özelliğindeki değer elde edilip alert ile yazdırılmıştır.Şimdi burada komutları izah edelim.

• $(this) : Bu komut o anda içinde bulunulan elemanı sembolize eder.
• $(this).parent(“div”) : Bu komut o anda içinde bulunulan elemanın parent(“div”) metodu ile içinde bulunduğu bir üst div nesnesine ulaştırır.
• $(this).parent(“div”).find(“#LinkA”) : Bu komut o anda içinde bulunulan elemanın parent(“div”) metodu ile içinde bulunduğu bir üst div nesnesine ulaştırır ve o div içinde id değeri “LinkA” olan elemanı getirir.

Şimdi de, “LinkB” ye tıklandığında “OrtaDiv” içindeki “BilgiB” ye veri yazdıralım.

<script type="text/javascript">
    $(document).ready(function () {
        $("#LinkB").click(function () {
            var BilgiB = $(this).parent("div").parent("div").find("#BilgiB");
            BilgiB.html("Link B tıklandı");
        });
    });
</script>

Komutları izah edelim.

• $(this).parent(“div”).parent(“div”).find(“#BilgiB”) : Bu komut o anda içinde bulunulan elemanın, bir üstündeki div nesnesinin, bir üstündeki div nesnesine gider ve en son o div nesnesi içindeki id değeri “BilgiB” olan elemanı seçer.

Son olarakta “LinkA” ya tıklandığında “BilgiA” yı değiştirelim.

<script type="text/javascript">
    $(document).ready(function () {
        $("#LinkA").click(function () {
            var BilgiA = $(this).parent("div").parent("div").parent("div").find("#BilgiA");
            BilgiA.html("Link A tıklandı");
        });
    });
</script>

Evet, gördüğünüz gibi parent fonksiyonu ile üst elementlere ulaşıp her türlü işlemi gerçekleştirebiliyoruz.Bu fonksiyonu genellikle tablo listelemelerinde veri silindikten sonra dinamik olarak ilgili veriye ait satırı silmek için tercih edebilir ya da buna benzer bir çok yerde kullanabilirsiniz.

Sonraki yazılarımda görüşmek üzere…
İyi çalışmalar dilerim…