使用 jQuery 定位父 div 内的元素

Question

我使用此代码来显示和隐藏带有名为“text”的类的 div：

$(".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).prev(".text").slideToggle();         
 });

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

Answer 2

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

Answer 3

尝试 ：

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

Answer 4

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

Answer 5

替换

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

为

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