使用jQuery定位父div中的元素

Question

我使用此代码显示并隐藏了一个名为“text”的类：

$(".text").hide();
$('.more-link').click(function(){
       $(".text").slideToggle();         
 });

与此HTML一起使用：

<div class="box">
    <p>Some text</p>
    <div class="text">
        <p>Even more text</p>
    </div>
    <a href="#" class="more-link">Read more</a>
</div>

<div class="box">
    <p>Some text</p>
    <div class="text">
        <p>Even more text</p>
    </div>
    <a href="#" class="more-link">Read more</a>
</div>

我需要帮助来定位父div中的特定“div.text”。我想我应该使用parent（）函数，但我不明白应该如何应用它。

感谢您的帮助。

Answer 1

$('.text').hide();
$('.more-link').click(function(){
   $(this).parent().find('.text').slideToggle();         
});

Answer 2

你可以这样做（这样每个链接只显示相关文字）：

$(".text").hide();
$('.more-link').click(function(){
       $(this).prev(".text").slideToggle();         
 });

fidlle：http://jsfiddle.net/QEVXf/

Answer 3

替换

$('.more-link').click(function(){
       $(".text").slideToggle();         
});

与

$('.more-link').click(function(){
       $(this).parent().find(".text").slideToggle();         
});

Answer 4

尝试：

$(".text").hide();
$('.more-link').click(function(e){
    $(this).parent().find(".text").slideToggle();         
});

Answer 5

$(".text").hide();
$('.more-link').click(function(){
       $(this).siblings(".text").slideToggle();         
 });