Javascript
Js ile üst elemanlara ulaşmak | closest ve parent kullanımı
Js each döngüsü ile closest parent kullanımı
Closest Kullanımı
En yakın etiketi seçme ve bulma işlemi için kullanılır. Hedef aldığımız etiketin en yakınında bulunan elementi yakalayabilirsiniz.
Parent Kullanımı
Hedef aldığımız nesnenin bulunduğu üst elemanlarına ulaşmak için parent kullanılır. Örnek gerekirse iç içe yada üst üste birden fazla div etiketine ulaşmak için birden fazla parent kullanarak işleminizi gerçekleştirebilirsiniz.
Aşağıdaki örnekte input ve select alanlarının boş olanlarını each döngüsüyle kontrol eden bir kodlama içeriği mevcut. Özellik olarak bakıldığında görünümü aktif yada pasif olanları dikkate alarak kontrolü sağlıyor ayrıca iç içe karmaşık diyebileceğimiz üst elementleri de nasıl kapsadığını aşağıdaki örnekten bakabilirsiniz.
Canlı Demo
KAYNAK KODLAR İÇİN
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<style>
.divim {
width: 600px;
height: 400px;
padding: 20px;
background-color: #afd2d7;
position: relative;
margin: auto;
}
#goster {
float:right;
margin:0px;
}
</style>
</head>
<body>
<div class="divim">
<div>
<div style="float:right;"><button class="tiklaGizle">Gizle</button>
<button class="tiklaAc">Gizlileri Aç</button>
</div>
<h3>Inputlar Ve Selectler</h3>
<input type="text" id="input1" class="inputKontrol"/><br><br>
<input type="text" id="input2" class="inputKontrol"/><br><br>
<select id="selectAdi" class="inputKontrol">
<option selected value="-1">Lütfen Seçiniz</option>
<option value="2">test 1</option>
<option value="3">test 2</option>
</select>
<br><br>
<div class="acdivi" style="display:none;">
<input type="text" id="input3" class="inputKontrol"/><br><br>
<input type="text" id="input4" class="inputKontrol"/><br><br>
<div id="parent-icin-ic-ice-Div">
<div id="parent-icin-ic-ice-Div-2">
<input type="text" id="input5" class="inputKontrol" />
</div>
</div>
</div><br>
<span id="goster"><b>Boş Olan Alanlar:</b><br> <div id="kayit"></div></span>
<br><br><br>
<button onclick="calistir();">Çalıştır</button>
<button onclick="secilenleriTemizle();">Seçilenleri Temizle</button>
</div>
</div>
<script type="text/javascript">
$(".tiklaAc").on("click", function (){
$(".acdivi").css('display', 'block');
});
$(".tiklaGizle").on("click", function (){
$(".acdivi").css('display', 'none');
});
$("#kayit").html("");
function calistir() {
var aktifDiv="";
$(".inputKontrol").each(function (e) {
var val=$(this).val();
console.log(val);
if(($(this).closest("div").css('display') !== 'none' && val.length < 1 || $(this).closest("div").css('display') !== 'none' && val=="-1") && ($(this).parent('div').css('display') != 'none' && val.length < 1 || $(this).parent('div').css('display') != 'none' && val=="-1") && ($(this).parent('div').parent('div').parent('div').css('display') != 'none' && val.length < 1 || $(this).parent('div').css('display') !== 'none' && val=="-1")){
aktifDiv=$(this).attr("id");
if(aktifDiv) {
$("#kayit").append(aktifDiv + " ");
}
}
});
return aktifDiv;
};
function secilenleriTemizle(){
$("#kayit").html("");
}
</script>
</body>
</html>
