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工作正常，当我尝试从{strong>最后一个 content div中获取时出现问题{1}}到下一个container中的第一个 content div。

有几个要点： -

默认情况下，只有第一个 container div可见，其余的都是隐藏的，但我需要一个解决方案，如果例如第二个{{1}第四个content中的div是可见的。
只有一个content div可见。

到目前为止，我设法提出的唯一解决方案似乎非常麻烦，尽管工作。

container

这方面的主要缺点是它依赖于上面的DOM结构，我确信自己有一种方法可以选择具有给定类的下一个元素，无论它出现在DOM中的哪个位置。

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

Here's a fiddle with the above example

抱歉这个冗长的问题！

Answer 1

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必须是.content的直接子项。

使用jsFiddle示例here

Answer 2

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

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

然后可以直接定位content div：

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

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

查找具有给定类的下一个元素，无论它在DOM中出现在何处

4 个答案: