jQuery nächste Klassenauswahl

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

Ich wollte den nächsten level3 zu fadeIn und fadeOut auszuwählen, funktioniert aber nicht. Ist meine Syntax falsch? Online-Beispiel: http://jsfiddle.net/meEUZ/

Answer 1

Versuchen anstelle von .next().closest(), die durch die Vorfahren des DOM-Element durchläuft.

Working Demo

Auch sollten Sie verwenden $(this) statt $('.Level2') sonst werden sie wählen Sie alle .Level2 anstatt der angeklickt ein.

Sie können auch für so etwas gehen - $(this).closest('.wrap').find('.Level3').fadeToggle();.

Prost!

Answer 2

am nächsten kommt der Dom Baum. es wird nicht etwas finden, das ein Geschwister ist. Sie können eine Suche auf einer übergeordneten verwenden dies

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

Answer 3

jQuery .closest() Methode wählen keine Geschwister-Selektoren, aber die Eltern zu erreichen. Sieht so aus, als ob du nach der .siblings() Methode suchst.

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

Answer 4

Ja! closest startet die DOM-Suche aus dem Selektor, den Sie übergeben, und geht die DOM-Hierarchie nach oben, wobei die Eltern/Vorfahren durchsucht werden. Verwenden Sie stattdessen siblings oder next. So:

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

Answer 5

Ja, dort sind viele Verfahren in JQuery verfügbar am nächsten des DOM finden Element

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