找到最近的元素

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来点击article。我目前的JS是：

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

但它不起作用-它找到了每一个。这是小提琴

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');
    });

小提琴

或者更好的：

  $('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');
       }
   });

更新小提琴

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')
    })
});

工作fiddle=> http://jsfiddle.net/naw8W/3/