JQuery’de closest Metodu Kullanımı

Yazılım Kodu Kanalına Abone Olun

Herkese merhaba,

Bu yazıda JQuery’de closest metodu kullanımı ile ilgili bilgi vermeye çalışacağım.

JQuery’de closest metodu seçtiğimiz elemanın belirttiğimiz seçici kuralına göre en yakın olan ebeveynini (kendisi de bu kontrole dahildir) bulur ve bize döner. Eğer bulamazsa null sonucunu bize döner

Aşağıdaki kodlar yardımıyla siz de bu işlemi rahatlıkla yapabilirsiniz.

HTML Kodu

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>JQuery’de closest Metodu Kullanımı</title>
</head>
<body>
<button>span etiketine en yakın div etiketini seç</button>

<div id="box">
    <div>
        div
        <div>
        div
            <p>
                p
                <span>span</span>
            </p>
        </div>
    </div>
</div>
</body>
</html>

CSS Kodu

body {
    margin: 20px;
    font-size: 18px;
}

#box * {
    max-width: 500px;
    display: block;
    border: 2px solid blue;
    color: black;
    padding: 5px;
    margin: 5px;
}

button {
    padding: 12px;
    margin-bottom: 18px;
    background-color: red;
    color: #fff;
    border: none;
    cursor: pointer;
    font-size: 16px;
}

JQUERY Kodu

$(document).ready(function () {

    $("button").click(function () {
        $("span").closest("div").css({ "color": "red", "border": "3px solid red" });
    });

});

Herkese çalışma hayatında ve yaşamında başarılar kolaylıklar.

25 Kez Okundu

Yavuz Selim Kart

Yazılım ve veri tabanında bildiklerimi anlatmaya gayret ediyorum. Halen birçok programlama dili üzerinde araştırmalar yaparak kendimi geliştiriyorum. Bunlar haricinde Grafik Tasarım ve Wordpress konularına da ilgim bulunmakta. SEO ve Sosyal medya yönetimleri hakkında da bilgim mevcuttur. Kısaca çok çalışmayı seven azimli biriyim.

You may also like...

Sitedeki yazıları kopyalamak yasaktır.