找到最近的元素

Question

我有这个HTML：

<div class="row">
    <article>1</article>
    <article>2</article>
    <div class="load-work"></div>
    <article>3</article>
    <article>4</article>
    <div class="load-work"></div>
    <article>5</article>
    <article>6</article>
</div>

我想要做的是找到点击.load-work的{​​{1}}。我现在的JS是：

article

但它不起作用 - 它找到了每个。这是jsfiddle

Answer 1

您可以使用.nextAll()和:first：

尝试此操作

    $('article').on('click', function () {
         $('.load-work').each(function () {
               $(this).hide().removeClass('loaded-work').html('');
         });
         $(this).nextAll('.load-work:first').show().addClass('loaded-work');
    });

Fiddle

---

或者更好的一个：

  $('article').on('click', function () {
       $('.load-work').each(function () {
           $(this).hide().removeClass('loaded-work').html('');
       });
       if($(this).nextAll('.load-work:first').length){
           $(this).nextAll('.load-work:first').show().addClass('loaded-work');
       }else{
           $(this).prevAll('.load-work:first').show().addClass('loaded-work');
       }
   });

Updated fiddle

Answer 2

使用以下

$('article').each(function() {          $(this).on('click', function() {
        $('.load-work').each(function() {
            $(this).hide().removeClass('loaded-work').html('');
        });
        $(this).parent().closest('.row').find('.load-work').first().show().addClass('loaded-work')
    })
});

工作小提琴=＆gt; http://jsfiddle.net/naw8W/3/