jQuery selettore vicino classe

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(); 
}); 

ho voluto selezionare il Level3 più vicino alla fadeIn e fadeOut, ma non funziona. La mia sintassi è sbagliata? Campione online: http://jsfiddle.net/meEUZ/

Answer 1

Prova .next() invece di .closest() che attraversa attraverso gli antenati dell'elemento DOM.

Working Demo

Inoltre si dovrebbe usare $(this) piuttosto che $('.Level2') altro Sarà selezionare tutti i .Level2 piuttosto che cliccato uno.

Si può anche andare per qualcosa di simile - $(this).closest('.wrap').find('.Level3').fadeToggle();.

Cheers!

Answer 2

viaggi più vicini fino all'albero del dom. non troverà qualcosa che è un fratello. è possibile utilizzare un ritrovamento su un genitore per raggiungere questo metodo

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

Answer 3

di jQuery .closest() non selezionare i selettori di fratelli, ma i genitori. Sembra che tu stia cercando il metodo .siblings().

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

Answer 4

Sì! closest avvia la ricerca DOM dal selettore che si passa ad esso e sale in alto nella gerarchia DOM, cercando tra i genitori/antenati. Utilizzare invece siblings o next. Ti piace questa:

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

Answer 5

Sì, ci sono molti metodo avaiable in jQuery per trovare più vicina della DOM elemento

$('.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>