:odd - Tek İndex Numaralı Elemanları Seçme

Belirtilen html elemanlarının, index numarası tek sayı olanlarını ( 1, 3, 5... ) seçer.

<div id="ornekkod">
<button>Kutuları Seç</button>
<br/>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>
<script>
$('#ornekkod button').click(function(){
$('#ornekkod div:odd').css({"background":"#ff0000"});
});
</script>


Örneğimizde $('#ornekkod div:odd') şeklinde derlediğimiz seçici "id"si "örnekkod" olan html elemanı içindeki divlerden index numarası tek sayı olanları ifade eder. index numaraları sıfırdan başladığı için ilk divimizin index numarası bir çift sayı (0), 2. divimizin index numarası ise bir tek sayıdır (1). İndex numaraları "0,1,2,3 ve 4" olan 5 tane divimizden index numaraları "1" ve "3" olan divler seçilmiş, index numaraları "0","2" ve "4" olan divler seçime dahil edilmemiştir.

Tam html yapısı;

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Hicertcetin.com</title>
<style type="text/css">
#ornekkod{
padding:5px; background:#ddd; text-align:center; border:1px solid #656565;}
#ornekkod div{
display:inline-block;
width:50px; height:50px; line-height:50px;
margin:1px; background:#000;
}
#ornekkod button{height:30px; font-weight:bold;}
</style>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
</head>
<body>
<div id="ornekkod">
<button>Kutuları Seç</button>
<br/>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>
<script>
$('#ornekkod button').click(function(){
$('#ornekkod div:odd').css({"background":"#ff0000"});
});
</script>
</body>
</html>

- 31.05.2014 3

Sosyal Medya Paylaşım Alanı