jQuery Geschwister Methode und setzen Höhe

Question

Ich habe DOM-Struktur wie diese

<div> 
    <div class="logo"></div> 
    <div class="description"></div> 
    <div class="learnMore"><a class="learn-more" href="#path">Learn More</a>      
</div> 
<div> 
    <div class="logo"></div> 
    <div class="description"></div> 
    <div class="learnMore"><a class="learn-more" href="#path">Learn More</a>      
</div> 

auf der einen Tag klicken Ich versuche, mit der Höhe des div mit Klassenbeschreibung zu ändern, in der gleichen Mutter div

$('.learn-more').click(function() { 
    $(this).siblings('.description').animate({height: '90px'}, 200); 
} 

Dies ist die ganze Zeit fehlgeschlagen.

$('.description').animate({height: '90px'}, 200); 

Dies funktioniert aber es ändert Höhe für alle divs mit dem Klassennamen nicht nur derjenige, der seine Geschwister ist.

Irgendwelche Vorschläge?

Answer 1

In Ihrer ersten Lösung wollten Sie .learn-more anstelle von .show-more verwenden? Beachten Sie in diesem Fall, dass das Beschreibungsdiv kein gleiches Element der Verknüpfung ist. es ist Geschwister seiner Eltern. Fügen Sie einen .parent() Anruf hinzu, sollte dies behoben werden. I.e.

$('.show-more').click(function() { 
     $(this).parent().siblings('.description').animate({height: '90px'}, 200); 
    }