查找下一个元素与给定的类，无论它出现在DOM(Find next element with a gi

我有一个很艰难的时期试图找出一些东西，我相信应该是比较简单的。

我需要一个类（div.content）的下一次出现，这可能会在DOM anwhere出现

下面是一些简单的标记代表什么，我有：

<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工作正常，问题是当我尝试从最后得到content在一个div container的第一 content ，在未来的div container 。

几个重要的点： -

默认情况下， 只有第一个 content股利是可见的，其余是隐藏的，但我需要一个解决方案，如果例如第二工作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结构的解决方案，如果这是不可能的，任何替代解决方案将是有益的！

下面是与上面的例子提琴

对不起，啰嗦的问题！

Answer 1:

事实证明，这确实是一个非常简单的任务。通过选择传递给jQuery的index()方法，你就能够获得当前元素，相对于其收集的指标：

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

那么content DIV可以直接定位：

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

Answer 2:

jQuery(function() {
    var i = 1;
    jQuery('.content').each(function() {
        jQuery(this).addClass('content-' + i);
        i++;

        jQuery(this).find('a.next').bind('click', function() {
            toggleContentDivs(jQuery(this).parent());
        }); 
    });
});

function toggleContentDivs(oContentDiv)
{
    var nextVisible   = false,
        setVisibility = false;

    jQuery('.content').each(function() {
        if (oContentDiv.attr('class') == jQuery(this).attr('class')) {
            nextVisible = true;
            jQuery(this).hide();
        } else if (nextVisible == true) {
            jQuery(this).show();
            nextVisible   = false;
            setVisibility = true;
        } else {
            jQuery(this).hide();
        }
    });
    // it must have been the last .content element
    if (setVisibility == false) { 
        jQuery('.content:first').show();
    }
}

只有现有的代码DOM的依赖，是a.next必须。内容的直接子。

工作的jsfiddle例如这里

Answer 3:

原来一个简单的（ 不太详细 ）的方式来写它正是你怎么过的减函数的参数：

$theContent.parent().next().length

编辑2：

我想我所有的解决方案的广泛的，但他们是有缺陷的。总之我觉得你非常有做的最简单的方法。除非也许jQuery的专家会附和就这个问题和我们展示一个更好的办法。

这是我最后的建议：

$('.next').click(function() {
    $theContent = $(this).parent('.content');
    $theContent.hide(10, function() {
        if (!$theContent.next('.content').length) {
            $theContent.parent('.container').next()
                .find('.content:first').show();
        } else {
            $theContent.next('.content').show();
        }
    });
});

理想的解决办法是使用closest()但问题是，它不是表现我的预期，因为集装箱的分离方式。在jQuery的例子，他们使用一个无序列表。嗯，是的，这是很容易，因为你可以节点类型区分（如li VS ul ）和简单地做.next('li') 在这里您将使用所有div秒。出于某种原因， .closest('.content')不一旦第一容器的工作进行到底达到！

Answer 4:

这个怎么样：

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 {
   $('.content:first').show();
   //alert('Reached the end or something went wrong!');
}

的jsfiddle

文章来源: Find next element with a given class, regardless of where it appears in the DOM