jquery - 查找具有给定类的下一个元素，无论它出现在 DOM 中的位置

Question

我很难找出一些我认为应该相对简单的东西。

我需要获取下一个出现的类 (div.content)，它可能出现在 DOM 中的任意位置

下面是一些简化的标记，代表了我所拥有的:

<div class="container">
  <div class="content">
    Example content #1    <a href="#" class="next">Next</a>
  </div>

  <div class="content">
    Example content #2    <a href="#" class="next">Next</a>
  </div>
</div>

<div class="container">
  <div class="content">
    Example content #1    <a href="#" class="next">Next</a>
  </div>

  <div class="content">
    Example content #2    <a href="#" class="next">Next</a>
  </div>
</div>

显示下一个 content给定 container 内的 div工作正常，当我尝试从 last content 获取时，问题就出现了。 div in a container到第一个 content div 在下一个 container .

几个要点:-

• 默认情况下，仅第一个 content div 是可见的，其余部分是隐藏的，尽管我需要一个可以工作的解决方案，例如第二个 content div 在第四个 container可见。

• 只有一个content div 将永远可见。

到目前为止，我设法想出的唯一解决方案似乎非常麻烦，尽管它确实有效。

$('.next').click(function() {
    $theContent = $(this).parent('.content');
    $theContent.hide();

    if ($theContent.next('.content').length) {
        $theContent.next('.content').show();
    } else if ($theContent.parent('.container').next('.container')
        .children('.content').length
    ) {
        $theContent.parent('.container').next('.container')
            .children('.content:first').show();
    } else {
        // reached the end or something went wrong
    }
});

这样做的主要缺点是它依赖于上述 DOM 结构，我确信存在一种方法来选择给定类的下一个元素，无论它出现在 DOM 中的位置。

理想情况下，我想要一个不依赖于任何给定 DOM 结构的解决方案，如果不可能，任何替代解决方案都会有所帮助!

Here's a fiddle with the above example

抱歉问了这么长的问题!

Answer 1

事实证明，这确实是一个非常简单的任务。通过将选择器传递给 jQuery 的 index() 方法，您可以获取当前元素相对于其集合的索引:

var idx = $theContent.index('div.content') + 1;

然后可以直接定位content div:

$('div.content').eq(idx).show();