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;
    });
});

with：

<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"会滑动切换。如何将每个连续的 a class="toggle" 绑定到其自己的 p class="extra_text"？

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

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;
});

Fiddle Demo: http://jsfiddle.net/KuQPP/

编辑

我通常不会走这么远来解释如何有些东西有效，但是在这种情况下，图片胜于雄辩，并且心情很慷慨，我创建了这个小图表，说明为什么您的代码不起作用，而这种方式可以。

说明图