查找具有给定类的下一个元素，无论它在DOM中的位置如何 [英] Find next element with a given class, regardless of where it appears in the DOM

问题描述

我很难找到一个我认为应该相对简单的东西.

I'm having a really hard time trying to figure out something which I believe should be relatively simple.

我需要获取下一个出现的类(div.content)，该类可能会出现在DOM中的某个地方

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

Below is some simplified markup which represents what I have:

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

在给定的container中显示下一个content div效果很好，当我尝试从container的 last content div到时出现问题>下一个container中的第一个 content div.

Showing the next content div within a given container works fine, the problem comes when I try to get from the last content div in a container to the first content div in the next container.

几个要点:-

• 默认情况下，只有第一个 content div可见，其余的隐藏，尽管我需要一种解决方案，例如，如果第二个content div可见第四个container.

• By default, only the first content div is visible, the rest are hidden, though I need a solution that would work if for instance the second content div in the fourth container is visible.

只有一个content div是可见的.

Only one content div will ever be visible.

到目前为止，我设法提出的唯一解决方案似乎非常麻烦，尽管它确实可行.

The only solution I've managed to come up with so far seems extremely cumbersome, although it does work.

$('.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中的什么位置.

The major downside to this is that it relies on having the above DOM structure, I'd convinced myself that a method would exist for selecting the next element with a given class, regardless of where it appeared in the DOM.

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

在上面的示例中有一个小玩意儿

很抱歉这个冗长的问题！

Sorry for the long-winded question!

推荐答案

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

It turns out that this is indeed a very simple task. By passing a selector to jQuery's index() method, you're able to get the index of the current element, relative to its collection:

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

然后可以直接定位content div:

Then the content div can be targeted directly:

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

这篇关于查找具有给定类的下一个元素，无论它在DOM中的位置如何的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！