1

我很难弄清楚我认为应该相对简单的东西。

我需要获取下一次出现的类 (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>

在给定中显示下一个contentdivcontainer效果很好，当我尝试从 a 中的最后 content一个div到 next 中container的第一个 div 时，问题就来了。contentcontainer

几个重点：-

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

  • 只有一个contentdiv 是可见的。

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

$('.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 结构的解决方案，如果这不可能，任何替代解决方案都会有所帮助！

这是上面示例的小提琴

对不起，冗长的问题！

4

4 回答 4

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

Working jsFiddle example here

于 2012-10-11T22:24:55.467 回答
2

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;

Then the content div can be targeted directly:

$('div.content').eq(idx).show();
于 2013-04-10T14:35:53.597 回答
1

结果证明，一种更简单（不那么冗长）的编写方式正是您减去函数参数的方式：

$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 的示例中，他们使用无序列表。是的，这要容易得多，因为您可以区分节点类型（例如livs ul）并简单地做.next('li'). 在这里，您使用的是所有divs。并且由于某种原因.closest('.content')，一旦到达第一个容器的末端，它就不起作用了！

于 2012-10-11T20:57:35.603 回答
-1

这个怎么样：

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

于 2012-10-11T20:40:59.517 回答