jQuery yakın sınıf seçicisi

Question

<div class="wrap"> 
    <div class="Level2">Click me</div> 
    <div class="Level3">Information</div> 
</div> 

<div class="wrap"> 
    <div class="Level2">Click me</div> 
    <div class="Level3">Information</div> 
</div> 

<div class="wrap"> 
    <div class="Level2">Click me</div> 
    <div class="Level3">Information</div> 
</div> 

<div class="wrap"> 
    <div class="Level2">Click me</div> 
    <div class="Level3">Information</div> 
</div> 

jQuery

$('.Level2').click(function(){ 
    $('.Level2').closest('.Level3').fadeToggle(); 
}); 

Ben fadeIn ve fadeout en yakın Düzey3 seçmek istedim, ama çalışmıyor. Benim sözdizim yanlış mı? Online Örnek: http://jsfiddle.net/meEUZ/

Answer 1

yerine DOM öğesinin ataları içinden geçerken, .closest() ait .next() deneyin.

Working Demo

Ayrıca $(this) yerine $('.Level2') aksi takdirde seçeceğiz kullanmalıdır TÜM .Level2 ziyade tıklandığında biri. $(this).closest('.wrap').find('.Level3').fadeToggle(); -

Ayrıca böyle bir şey için gidebilirsiniz.

Şerefe!

Answer 2

yakın dom ağaca geçecek. Kardeş olan bir şey bulamaz. Eğer kardeş seçicileri, ancak ebeveynlerin seçmez bu

$('.Level2').click(function(){ 
     $(this).parent().find('.Level3').fadeToggle(); 
    }); 

Answer 3

jQuery'nin .closest() yöntemini gerçekleştirmek için bir ebeveyn üzerinde bulunan bir şeyi kullanabilirsiniz. .siblings() yöntemini aradığınız anlaşılıyor.

$('.Level2').click(function(){ 
    $(this).siblings('.Level3').fadeToggle(); 
}); 

Answer 4

Evet! closest ebeveyn/atalarının arama yapmak, kendisine iletmek seçiciden DOM arama başlatır ve yukarı doğru DOM hiyerarşi gider. Bunun yerine siblings veya next kullanın. Bunun gibi :

$('.Level2').click(function(){ 
    $(this).siblings('.Level3').fadeToggle(); 
}); 

Answer 5

Evet, jQuery avaiable birçok yöntem :-)

$('.Level1').click(function(){ 
 
    $(this).next('.Level3').fadeToggle(); 
 
}); 
 
$('.Level2').click(function(){ 
 
    $(this).closest('.wrap').find('.Level3').fadeToggle(); 
 

 
}); 
 
$('.Level4').click(function(){ 
 
    $(this).parent().find('.Level3').fadeToggle(); 
 
}); 
 

 
$('.Level5').click(function(){ 
 
    $(this).siblings('.Level3').fadeToggle(); 
 
});

.level{background:Red;width:200px;height:40px;} 
 
.Level3{background:blue;width:300px;height:50px;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="wrap"> 
 
    <div class="Level1 level">Click me()sing next)</div> 
 
    <div class="Level3">Information</div> 
 
</div> 
 

 
<div class="wrap"> 
 
    <div class="Level2 level">Click me(Using closest)</div> 
 
    <div class="Level3">Information</div> 
 
</div> 
 

 
<div class="wrap"> 
 
    <div class="Level4 level">Click me(Usingh Parent)</div> 
 
    <div class="Level3">Information</div> 
 
</div> 
 

 
<div class="wrap"> 
 
    <div class="Level5 level">Click me(Using Sibiling)</div> 
 
    <div class="Level3">Information</div> 
 
</div>