下一个（），最近的（）和查找（）

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

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

所以只需使用：

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

这应该可以解决问题

Answer 2

你可以这样做：

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

Answer 3

变化：

 .next('article.biography')

收件人：

 .nextAll('article.biography:first')

Next 表示：查看下一个元素，如果匹配选择器则返回。如果不是，则不返回任何内容。它看起来并不比下一个元素更远。

nextAll 检查所有这些，然后使用 :first 来获取第一个匹配项。

这是一个常见的错误。

Answer 4

试试看-

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