jQuery .each() Kullanımı

Merhaba Arkadaşlar,

Bu dersimizde jQuery’nin bir saydırma aracı olan each() komutunun kullanımını göreceğiz. Class veya data gibi seçicileri aynı olan bir çok elemanı, hepsini kapsayacak bir sorgu içerisine alarak işlem yaptırmak için bu komutu kullanıyoruz. Konunun daha iyi kavranması için yapacağımız örnek uygulama içerisinde de tüm div yüksekliklerini kontrol ettirerek en yüksek değer hangisi ise diğerlerinin de bu değeri almasını sağlayacağız.

İlk olarak bir klasör oluşturuyoruz ve içerisine index.html isimli bir sayfa açıyoruz. Daha sonra bir metin editörü vasıtası ile sayfamızı kodlamaya başlıyoruz. Kodlarımızın jQuery kütüphanesi çekilmiş salt görünümü şu şekilde başlayacaktır:


<!DOCTYPE html>
<html lang="en">
<head>
<script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
</head>
<body>
	
</body>
</html>

İlk olarak 4 adet div yaratalım ve hepsine ortak bir class verelim. Ayrıca ayrı ayrı ID değeri de vererek ilk görünüm için yüksekliklerini farklı ayarlayalım. Kodlarımız şu şekilde olacaktır :


<!DOCTYPE html>
<html lang="en">
<head>
<style type="text/css">
	.box{float: left; width: 150px; margin-right: 10px;}
	#first{background: black; height: 100px;}
	#second{background: gray; height: 150px;}
	#third{background: blue; height: 200px;}
	#fourth{background: red; height: 250px;}
</style>
<script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
</head>
<body>
	<div class="box" id="first"></div>
	<div class="box" id="second"></div>
	<div class="box" id="third"></div>
	<div class="box" id="fourth"></div>
</body>
</html>

Kodlarımızı bu şekilde kaydedip sayfayı çalıştırdığımızda yan yana dizilmiş ve yükseklikleri birbirinden farklı 4 adet kutu göreceğiz. Şimdi jQuery’nin each() komutunu kullanarak ” .box ” class değerine sahip div’ler içerisinden en yükseğinin ” height ” değerini alıp diğerlerine de vereceğiz. Bunun için yazacağımız jQuery kodları şu şekilde olacaktır :


$(document).ready(function(){
	var heightControl = 0;
	$(".box").each(function(){
		var boxHeight = $(this).height();
		if(boxHeight > heightControl){
			heightControl = boxHeight;
		}else{
			boxHeight = boxHeight;
		}
	});
	$(".box").height(heightControl);
});

Kodlarımızı bu şekilde ekledikten sonra sayfayı çalıştırdığımızda yükseklikleri css ile farklı verilmiş olan 4 div’in de eşitlendiğini göreceğiz. Kodlarımızı kısaca açıklamak gerekirse:

– heightControl isimli bir değişken oluşturarak bunun değerini 0 olarak belirledik.
– Class değerleri box olan div’ler bitene kadar çalışacak olan each döngüsünü oluşturduk.
– Döngü her çalıştığında yeni değer alacak olan boxHeight isimli bir değişken oluşturup bunun değerini de her seferinde seçili olan div’in yüksekliğine eşitledik.
– Bir if döngüsü oluşturarak each fonksiyonu her tekrar yaptığında boxHeight ve heightControl değişkenlerini karşılaştırdık. Eğer boxHeight değişkeni heightControl ‘den büyük ise yeni heightControl değerini boxHeight içerisinde ki değer olarak belirledik.
– Döngü tamamlandığında(yani div’ler bittiğinde) heightControl değerini, tüm div ‘lerin yükseklik değerine eşitleyecek bir satır ekledik.

Not : Bu ders içeriğinde kullanılan dosyaları İndir Sayfası 55 No ‘lu Maddeden İndirebilirsiniz..

Reklam

Tüm Yorumlar

One response to “jQuery .each() Kullanımı”

  1. Ramazan GÜLER says:

    Teşekkür ederiz faydalı bilgileriniz için

Leave a Reply

Your email address will not be published. Required fields are marked *