17 Ağustos 2018 Cuma

jQuery - parent, parents ve closest metotlarının kullanımı

By Berkay 15:57 JavaScript, jQuery Leave a Comment

Bu yazıda jQuery'deki parent, parents ve closest ifadelerinin ne olduklarını, aralarındaki farkları ve nasıl kullanıldıklarını anlatmaya çalışacağım.

Jquery'de bu metotlara ihtiyaç duyulan anlar oluyor. Gönderilerden oluşan bir sayfamız olduğunu düşünelim. Gönderilerin içerisinde de görsel, başlık ve metin bulunsun. En altta da herhangi bir buton olsun ve bu butona tıkladığımda da bir takım işlemler yapmak istediğimi farzedelim. Gönderilerim aşağıdaki gibi görünüyor.

<html>
<head>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<style>
.post {
 border: 5px solid #f5f5f5;
 margin: 20px;
}

.post img {
 display: block;
 float: left;
 margin-right: 20px;
}
</style>
</head>
<body>
<div class="post">
 <img src="https://cdn.pixabay.com/photo/2015/10/07/12/17/post-976115_960_720.png" width="100" height="100" />
 <h1>Gönderi 1</h1>
 <p>1. gönderinin içeriği</p>
 <div class="buttons">
  <input type="button" value="Tıkla"/>
 </div>
</div>
<div class="post">
 <img src="https://cdn.pixabay.com/photo/2015/10/07/12/17/post-976115_960_720.png" width="100" height="100" />
 <h1>Gönderi 2</h1>
 <p>2. gönderinin içeriği</p>
 <div class="buttons">
  <input type="button" value="Tıkla"/>
 </div>
</div>
<div class="post">
 <img src="https://cdn.pixabay.com/photo/2015/10/07/12/17/post-976115_960_720.png" width="100" height="100" />
 <h1>Gönderi 3</h1>
 <p>3. gönderinin içeriği</p>
 <div class="buttons">
  <input type="button" value="Tıkla"/>
 </div>
</div>
<div class="post">
 <img src="https://cdn.pixabay.com/photo/2015/10/07/12/17/post-976115_960_720.png" width="100" height="100" />
 <h1>Gönderi 4</h1>
 <p>4. gönderinin içeriği</p>
 <div class="buttons">
  <input type="button" value="Tıkla"/>
 </div>
</div>
</body>
</html>

Şimdi head tag'leri arasına jquery kodlarımı yazmaya başlıyorum.

$(document).ready(function(){
 $(".post input[type='button']").on("click", function(){

 });
});

Click fonksiyonunun içinde this komutunu kullandığımda tıklanan butona erişebilirim.

$(this).parent() komutunu çalıştırdığımda ise bir üst element olan buttons class'lı div'e erişiyorum.

$(this).parents() komutunu çalıştırdığımda ise tıkladığım butonun ana elementlerini görüyorum.

Closest komutuyla da istediğim herhangi bir parent elemente ulaşabiliyorum. Bana doğrudan bu butonu içinde parındıran .post class'lı element lazım. Bunun için aşağıdaki kodu yazıyorum.

$(this).closest(".post");

Aşağıdaki kod ile tıklanılan buton hangi class'taysa o class'ın arkaplan rengini değiştiriyorum.

$(document).ready(function(){
 $(".post input[type='button']").on("click", function(){
  var post = $(this).closest(".post").css("background","#f5f5f5");
 });
});