next (), closest () и 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 ниже, когда я нажимаю на изображение, я хочу определить следующий .biography в DOM и анимироватьи добавить класс.Я предполагаю, что мне придется использовать, 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.Далее будет просто искать следующий элемент на том же уровне.

Так что просто используйте:

$(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

просто попробуй-

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

Answer 4

Изменение:

 .next('article.biography')

На:

 .nextAll('article.biography:first')

Следующее означает: посмотрите на следующий элемент и верните его, если он соответствует селектору.Если нет, ничего не вернуть.Он не выглядит дальше, чем следующий элемент.

nextПроверьте все из них, а затем используйте: сначала просто получить первое совпадение.

Это распространенная ошибка.