寻找最近的元素

Question

I have this 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>

我想做的是找到最接近点击的article 的.load-work。 我目前的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')
    })
});

但是它不起作用 - 它会找到每一个。这里是jsfiddle

- Tomek Buszewski

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

更新的代码示例

- Jai

---

如果您点击文章“3”，则此内容是不正确的。最接近的.load-work应该是它之前的那个，但在这里结果将是紧挨着文章“4”的.load-work。 - Felix

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/

- Pratik Joshi