:first-child Html Elemanını İçindeki İlk Tagı Seçme

Belirtilen html elemanları için tüm ilk çocuk elemanları seçer.

<div id="ornekkod">
<button>Tüm divler içindeki ilk span etiketlerini seç</button>
<div>
<span>1.div 1.span</span><br />
<span>1.div 2.span</span><br />
<span>1.div 3.span</span><br />
</div>
<div>
<span>2.div 1.span</span><br />
<span>2.div 2.span</span><br />
<span>2.div 3.span</span><br />
</div>
</div>
<script type="text/javascript">
$('#ornekkod button').click(function(){
$('#ornekkod div span:first-child').css({"background":"#000","color":"#fff"}).text(" Seçildi ");
});
</script>

Örneğimizde first-child ile "id"si ornekkod olan html elemanı içindeki tüm divlerin içinden ilk span etiketleri seçilmiş ve css metodu ile arkaplan ve yazı renkleri değiştirilmiş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; border:1px solid #656565; text-align:center}
#ornekkod div{width:500px; padding:5px; margin:1px auto; background:#fff; color:#000}
#ornekkod span{margin:1px; background:orange}
#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>Tüm divler içindeki ilk span etiketlerini seç</button>
<div>
<span>1.div 1.span</span><br />
<span>1.div 2.span</span><br />
<span>1.div 3.span</span><br />
</div>
<div>
<span>2.div 1.span</span><br />
<span>2.div 2.span</span><br />
<span>2.div 3.span</span><br />
</div>
</div>
<script type="text/javascript">
$('#ornekkod button').click(function(){
$('#ornekkod div span:first-child').css({"background":"#000","color":"#fff"}).text(" Seçildi ");
});
</script>
</body>
</html>
- 29.05.2014 0

Sosyal Medya Paylaşım Alanı