jQuery困惑与$（this）.next或$（this）.parent

Question

使用：

$(document).ready(function(){
    $("a.toggle").removeClass('hide'); 
    $('p.extra_text').hide();
    $('a.toggle').click(function() {
        $(this).parent('div.bios').next('p.extra_text').slideToggle("slow", function(){ 
            $('a.toggle').text(function (index, text) {
                return (text == 'Read More . . .' ? 'Read Less . . .' : 'Read More . . .'); 
            });
        });    
        return false;
    });
});

使用：

<div class="bios">      
  <p><strong>A Nobody</strong></p>
  <p>A Nobody live in Anywhere, USA.<a class="toggle hide">Read More . . .</a></p>
  <p class="extra_text">Wonder who A Nobody really is?  Well, we do too!</p>    

  <p><strong>A Nobody</strong></p>
  <p>A Nobody live in Anywhere, USA.<a class="toggle hide">Read More . . .</a></p>
  <p class="extra_text">Wonder who A Nobody really is?  Well, we do too!</p>    
 </div><!--/bios-->     

点击任何a class="toggle"时，所有p class="extra_text" slideToggle。如何将每个后续a class="toggle"绑定到自己的p class="extra_text"？

我已经看到了使用$(this).next或$(this).parent的其他答案，但它们失败了，因为在p class="extra_text"之前还有其他p。我怎样才能最好地选择正确的，连续的a class="toggle" / p class="extra_text"组合而不用我的Jquery触发所有'em？

Answer 1

您想要$(this).parent().next()。

Answer 2

正如SLaks所指出的那样$(this).parent().next()正是你所寻找的，但你的文本功能会改变每一堂课，而是这样做：

$('a.toggle').click(function() {
    var link = this;

    $(this).parent().next().slideToggle("slow", function() {
        $(link).text(function(index, text) {
            return (text == 'Read More . . .' ? 'Read Less . . .' : 'Read More . . .');
        });
    });
    return false;
});

小提琴演示：http://jsfiddle.net/KuQPP/

修改

我通常不会走这么远来解释某些东西是如何起作用的，但在这种情况下，图片比单词更响亮，并且心情慷慨，我创建了这个小图，说明为什么你的代码不起作用，这样做。 / p>

说明图