jQuery-下一个和上一个不起作用答案

【问题标题】：jQuery- Next and Previous not workingjQuery-下一个和上一个不起作用
【发布时间】：2015-05-25 16:06:45
【问题描述】：

我已按照此页面中的解决方案进行操作。
How to create simple next and prev trigger button for slider's pagination buttons?

但是当我这样尝试时它不起作用，因为它不会将“selected-active”更改为另一个。

$('.previous, .next').on('click', function() {
    if ($(".selected-active")[$(this).attr('class')]().index()!=-1)
    $(".selected-active").removeClass('selected-active')[$(this).attr('class')]().addClass('selected-active');
});

HTML：

    <div class="row">
        <div class="previous"><span class="glyphicon glyphicon-chevron-up"></span>Previous</div>
    </div>

    <div class="row bottom">
        <div class="next"><span class="glyphicon glyphicon-chevron-down"></span>Next</div>
    </div>

    <div class="row">
            <ul class="container">
                <li class="section-container"><h6>Topic: Test</h5>
                    <ul>
                        <li class="item selected-active">
                            <a>
                             <span class="title">part 1: Introduction</span>
                            </a>
                        </li>
                        <li class="item">
                            <a>
                            <span class="title" >Part 2 : Content</span>                                
                            </a>
                        </li>
                    </ul>
                </li>
          </ul>
            <ul class="container">
                <li class="section-container"><h6>Topic: Test 2</h5>
                    <ul>
                        <li class="item">
                            <a>
                             <span class="title">part 1: Introduction</span>
                            </a>
                        </li>
                        <li class="item">
                            <a>
                            <span class="title" >Part 2 : Content</span>                                
                            </a>
                        </li>
                    </ul>
                </li>
          </ul>
     </div>

【问题讨论】：

应该看到一个错误，因为 jQuery 没有方法 previous()
hmm.我不知道怎么做，.so，可以帮助我改进我的jquery代码吗？
你想做什么？当您单击 next 或 previous 时会发生什么？我看到您正在尝试使用selected-active 做某事，添加或删除该类，但您的代码并不清楚。如果您能解释您的意图，我们可以尝试相应地更改代码:)
哦，我只是想创建这样的问题stackoverflow.com/questions/11934691/…
在我发布这个 jQuery 版本的代码之前，你删除了你的另一个问题，并在 li 项 jsfiddle.net/mplungjan/1qL1tsk0987654323@ 上进行了委托

标签： jquery html

【解决方案1】：

我会这样做：

$('.prev').on('click', function() {
  var i = $(".item").index($(".selected-active"));
  i = i > $('.item').length-1 ? 0 : i-1 ;
  $(".item").removeClass('selected-active').eq(i).addClass('selected-active');
});

$('.next').on('click', function() {
  var i = $(".item").index($(".selected-active"));
  i = i < $('.item').length-1 ? i+1 : 0 ;
  $(".item").removeClass('selected-active').eq(i).addClass('selected-active');
});

.selected-active {
  background-color: yellow;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="row">
        <div class="prev"><span class="glyphicon glyphicon-chevron-up"></span>Previous</div>
    </div>

    <div class="row bottom">
        <div class="next"><span class="glyphicon glyphicon-chevron-down"></span>Next</div>
    </div>

<br/>

    <div class="row">
            <ul class="container">
                <li class="section-container"><h6>Topic: Test</h5>
                    <ul>
                        <li class="item selected-active">
                            <a>
                             <span class="title">part 1: Introduction</span>
                            </a>
                        </li>
                        <li class="item">
                            <a>
                            <span class="title" >Part 2 : Content</span>                                
                            </a>
                        </li>
                    </ul>
                </li>
          </ul>
             <ul class="container">
                <li class="section-container"><h6>Topic: Test 2</h5>
                    <ul>
                        <li class="item">
                            <a>
                             <span class="title">part 1: Introduction</span>
                            </a>
                        </li>
                        <li class="item">
                            <a>
                            <span class="title" >Part 2 : Content</span>                                
                            </a>
                        </li>
                    </ul>
                </li>
          </ul>
     </div>

【讨论】：

谢谢，您的代码正在运行，但是如果我添加另一个像这样的主题jsfiddle.net/merk8/102
哦，谢谢，它正在工作，我想我找到了使用此代码的解决方案：D

【解决方案2】：

这可以使用next() 和prev() 函数相当简单地完成：

$('.previous, .next').click(function() {
    if ($(this).hasClass("previous") && $(".selected-active").prev().length) {
        $(".selected-active").removeClass('selected-active').prev().addClass('selected-active');
    } else if ($(this).hasClass("next") && $(".selected-active").next().length) {
        $(".selected-active").removeClass('selected-active').next().addClass('selected-active');
    }
    console.log($(".selected-active").text().trim());
});

此代码使用.hasClass() 方法检查按下了哪个按钮，然后检查selected-active 元素之前或之后是否有元素（使用.next().length 和.prev().length）。然后，它从当前具有该类的元素中删除 selected-active 类，并将其应用于下一个或上一个项目（如果存在）。如果不存在，则不会更改当前元素。每次按下任一按钮时，代码都会将selected-active 元素的内容输出到控制台。

https://jsfiddle.net/636k980b/1/ 您可以使用 F12 开发者工具查看控制台输出。

【讨论】：

【解决方案3】：

你想要的方法是 prev() 和 next() 所以由于类不匹配 prev 可以执行以下操作

$('.previous, .next').on('click', function() {
    var traverse = $(this).hasClass('next') ? 'next' : 'prev';
    if ($(".selected-active")[traverse]().index()!=-1)
    $(".selected-active").removeClass('selected-active')[traverse]().addClass('selected-active');
});

DEMO

【讨论】：

一个非常简短、优雅的解决方案。我基本上做了同样的事情，但这比我的要友好得多。 +1
感谢@charlietfl，如果添加一些li，代码运行良好，但是如何跳转到这样的另一个主题？ jsfiddle.net/y5db3j9y/3
可以通过跳过容器来使用相同的概念jsfiddle.net/y5db3j9y/4 我猜因为您已经嵌套了<ul>，每个<li> 可能会有多个<li>，并且需要这里还有第三步