Bu yazımda "eyyy jQuery sen nelere kadirsin" dedirten cinsten bir seçiciden bahsetmek istiyorum.
Özellikle açılır menü hazırlarken çok can sıkar. <ul> altındaki <li> etiketleri şöye olsun dediğimizde <li>'nin altındaki <ul>'nin altındaki <li> lerinde bu durumdan etkilenmesi insanı çileden çıkartır.
Gerçi yukarıda bahsettiğimiz gibi seçmek yerine ul > li { /* kodlar buraya */ } şeklinde de seçebiliriz ama, jQuery children seçicisi ile de seçmemiz mümkün.
Lafı uzatmadan seçicinin kullanımını inceleyelim.
Örnek Kullanım:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>jQuery .children Seçicisi</title>
<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<script>
$(document).ready(function(){
$(".listeler").children("li").css("border", "1px solid red");
});
</script>
</head>
<body>
<h1>jQuery .children Seçicisi</h1>
<ul class="listeler">
<li>Ana Liste Elemanı</li>
<li>Ana Liste Elemanı</li>
<li>Ana Liste Elemanı</li>
<li>Ana Liste Elemanı</li>
<li>
<ul>
<li>Alt Liste Elemanı</li>
<li>Alt Liste Elemanı</li>
<li>Alt Liste Elemanı</li>
<li>Alt Liste Elemanı</li>
<li>Alt Liste Elemanı</li>
<li>Alt Liste Elemanı</li>
<li>Alt Liste Elemanı</li>
<li>Alt Liste Elemanı</li>
<li>Alt Liste Elemanı</li>
<li>Alt Liste Elemanı</li>
</ul>
</li>
<li>Ana Liste Elemanı</li>
<li>Ana Liste Elemanı</li>
<li>Ana Liste Elemanı</li>
<li>Ana Liste Elemanı</li>
<li>Ana Liste Elemanı</li>
<li>Ana Liste Elemanı</li>
</ul>
</body>
</html>
Yukarıdaki kodda .listeler classına sahip <ul> elemanının altındaki <li> elemanlarını seçmiş olduk.
Ayrıca aynı işlemi $(".listeler > li").css() olarak ta yapabilirsiniz.
Okuduğunuz için teşekkür ederim.