Erweitern Nur die Child-Div in Parent

Question

Ich versuche, nur eine untergeordnete div anzuzeigen, wenn der Text des übergeordneten div angezeigt wird, anstelle aller anderen divs mit demselben Namen. Stellen Sie sich vier Divs mit Klassen von "Lead" vor und innerhalb dieser Leads gibt es ein normales Div-Kind. Anstatt alle Childs in anderen Lead Divs zu öffnen, möchte ich nur das eine Kind in jedem Lead.

Beispiel HTML:

<div class="lead"><div class="normaldiv">1</div></div> 
<div class="lead"><div class="normaldiv">2</div></div> 
<div class="lead"><div class="normaldiv">3</div></div> 
<div class="lead"><div class="normaldiv">4</div></div> 

jQuery - erweitert dies alles normal divs

$(".lead").click(function() { 
    $(".normaldiv").slideToggle("slow"); 
}); 

Geprüft:

$(this).parent().children(".normaldiv").slideToggle("slow"); 

Die getestete man dachte ich würde alle greifen die Kinder wi verdünnen Sie das übergeordnete div und erweitern Sie diese nur auf einen Klick. Bei einem Klickereignis wird jedoch nichts angezeigt.

Answer 1

greifen nur die Kinder nicht die Eltern Kinder

$(".lead").click(function() { 
 
// $(".normaldiv").slideToggle("slow"); 
 
    $(this).children(".normaldiv").slideToggle("slow"); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="lead"><div class="normaldiv">1</div></div> 
 
<div class="lead"><div class="normaldiv">2</div></div> 
 
<div class="lead"><div class="normaldiv">3</div></div> 
 
<div class="lead"><div class="normaldiv">4</div></div>

Answer 2

Verwenden $(this).find(".normaldiv") in Ihrem klicken Zuhörernur die normaldiv innerhalb des lead Element zu wählen - siehe Demo unter:

$(".lead").click(function() { 
 
    $(this).find(".normaldiv").slideToggle("slow"); 
 
});

<div class="lead"><div class="normaldiv">1</div></div> 
 
<div class="lead"><div class="normaldiv">2</div></div> 
 
<div class="lead"><div class="normaldiv">3</div></div> 
 
<div class="lead"><div class="normaldiv">4</div></div>

Answer 3

Sie müssen die Kinder der .lead Elemente auszuwählen, die Sie auswählen.

Was Sie derzeit im zweiten Beispiel tun, ist das übergeordnete des .lead Element Auswahl (einige Containerelement), und dann wählen .normaldiv aus seine Kinder versuchen (die nur .lead Elemente).

$(".lead").click(function() { 
 
    $(this).children(".normaldiv").slideToggle("slow"); 
 
});

.lead { 
 
    height: 20px; 
 
    width: 20px; 
 
    background-color: grey; 
 
    margin: 10px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="lead"><div class="normaldiv">1</div></div> 
 
<div class="lead"><div class="normaldiv">2</div></div> 
 
<div class="lead"><div class="normaldiv">3</div></div> 
 
<div class="lead"><div class="normaldiv">4</div></div>

^{Hinweis: CSS hinzugefügt für eine bessere Sichtbarkeit.}