Javascript next（）、next（）和find（）

我有以下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>

更改：

 .next('article.biography')

致：

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

下一步，检查所有选项，然后使用：first获得第一个匹配项

这是一个常见的错误。

试一下-

 $(this).find('article').hasClass(".biography").addClass('visible');

---

嗯，您不需要先调用find（）。 函数的作用是：搜索给定dom元素的所有子元素。下一步将只搜索同一级别上的下一个元素

所以只要使用：

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

这应该可以做到你可以做到的：

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

---

可能是我，但“团队”类的元素在哪里？

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

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