next()、next()和find()

Question

我有下面的HTML标记，

<section>
    <img width="106" height="113" title="key-staff-tim" alt="key-staff-tim" class="attachment-post-thumbnail wp-post-image" src="http://wp-content/uploads/2011/07/key-staff-tim.jpg">              
    <article class="biography visible" style="display: block;">
        <h3>Director</h3>
        <p>Aliquam sagittis purus vitae turpis elementum sed congue lectus tempor. Integer eleifend vestibulum tristique. Pellentesque ut risus leo. Duis tempus sollicitudin viverra. Pellentesque laoreet, justo ut dictum mattis, tellus odio dapibus lacus, convallis lobortis massa dolor nec quam.</p>
        <p>Aliquam sagittis purus vitae turpis elementum sed congue lectus tempor. Integer eleifend vestibulum tristique. Pellentesque ut risus leo. Duis tempus sollicitudin viverra. Pellentesque laoreet, justo ut dictum mattis, tellus odio dapibus lacus, convallis lobortis massa dolor nec quam.</p>
    </article>

 <img width="107" height="114" title="key-staff-chris" alt="key-staff-chris" class="attachment-post-thumbnail wp-post-image" src="http://wp-content/uploads/2011/07/key-staff-chris.jpg">               
    <article class="biography" style="top: 300px;">
        <h3>Director</h3>
            <p>Aliquam sagittis purus vitae turpis elementum sed congue lectus tempor. Integer eleifend vestibulum tristique. Pellentesque ut risus leo. Duis tempus sollicitudin viverra. Pellentesque laoreet, justo ut dictum mattis, tellus odio dapibus lacus, convallis lobortis massa dolor nec quam.</p>
             <p>Aliquam sagittis purus vitae turpis elementum sed congue lectus tempor. Integer eleifend vestibulum tristique. Pellentesque ut risus leo. Duis tempus sollicitudin viverra. Pellentesque laoreet, justo ut dictum mattis, tellus odio dapibus lacus, convallis lobortis massa dolor nec quam.</p>
    </article>

<img width="106" height="113" title="key-staff-nic" alt="key-staff-nic" class="attachment-post-thumbnail wp-post-image" src="wp-content/uploads/2011/07/key-staff-nic.jpg">             

    <article class="biography" style="top: 300px;">
        <h3>Designer</h3>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus aliquet auctor varius. Mauris venenatis, enim sit amet faucibus pharetra cras amet. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus aliquet auctor varius. Mauris venenatis, enim sit amet faucibus pharetra cras amet. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus aliquet auctor varius. Mauris venenatis, enim sit amet faucibus pharetra cras amet.</p>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus aliquet auctor varius. Mauris venenatis, enim sit amet faucibus pharetra cras amet. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus aliquet auctor varius. Mauris venenatis, enim sit amet faucibus pharetra cras amet.</p>
    </article>
<img width="109" height="112" title="key-staff-claire" alt="key-staff-claire" class="attachment-post-thumbnail wp-post-image" src="http://wp-content/uploads/2011/07/key-staff-claire.jpg">             
     <article class="biography" style="top: 300px;">
         <h3>Account Manager</h3>
         <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus aliquet auctor varius. Mauris venenatis, enim sit amet faucibus pharetra cras amet. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus aliquet auctor varius. Mauris venenatis, enim sit amet faucibus pharetra cras amet. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus aliquet auctor varius. Mauris venenatis, enim sit amet faucibus pharetra cras amet.</p>
         <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus aliquet auctor varius. Mauris venenatis, enim sit amet faucibus pharetra cras amet. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus aliquet auctor varius. Mauris venenatis, enim sit amet faucibus pharetra cras amet.</p>
    </article>
</section>

我想要对下面的jQuery做的是，当一个图像被点击时，我想要识别DOM中的下一个.biography，动画和添加类。我假设我将不得不使用，find()，.closest()或.next()。我已经尝试了下面所有的方法，这是我目前的尝试。

$('.the-team img').click(function(){
    //var clickedImage = $(this);
    $('.visible').animate({"top" : $('.the-team').height()+10 }, 1000).removeClass('visible').fadeOut(5);
    $(this).find().next('article.biography').addClass('visible');
});

Answer 1

你可以这样做：

$('img').click(function(){
    $(this).next('article.biography').addClass('visible').animate({"top" : $('.the-team').height()+10 }, 1000);
});

Answer 2

嗯，你不需要先调用find()。find()函数将搜索给定dom元素的所有后代。Next将只搜索同一级别的下一个元素。

所以只需使用：

$(this).next('article.biography').addClass('visible');

这应该能起到作用

Answer 3

更改：

 .next('article.biography')

至：

 .nextAll('article.biography:first')

Next的意思是:查看下一个元素，如果它与选择器匹配，则返回它。如果不是，则不返回任何内容。它不会比下一个元素看得更远。

首先检查所有匹配项，然后使用: nextAll只获取第一个匹配项。

这是一个常见的错误。