如何切换到第一个或最后一个＆＃34; li元素＆＃34;当他们下一个排队？

Question

我有一个分页栏，如果你点击＆＃34;下一个＆＃34;它会切换到下一个按钮。或＆＃34; prev＆＃34;箭头按钮。

我写了一些代码留在当前＆＃34;页面＆＃34;如果列表中的下一项是＆＃34; .next＆＃34;或＆＃34; .prev＆＃34;，但它无效。

我错过了什么？

＆＃13;

＆＃13;

LIMIT function

＆＃13;

$(document).ready(function() {
     var pageItem = $(".pagination li").not(".prev,.next");
     var prev = $(".pagination li.prev");
     var next = $(".pagination li.next");


     pageItem.click(function() {
       $('li.active').removeClass("active");
       $(this).addClass("active");
     });
  
     // stay on current button if next or prev button is ".next" or ".prev"  
     next.click(function() {
        if($('li.active').next() != next) {
          $('li.active').removeClass('active').next().addClass('active');
        }
     });

     prev.click(function() {
        if($('li.active').prev() != prev) {
          $('li.active').removeClass('active').prev().addClass('active');
        }
     });


   });

＆＃13;

＆＃13;

＆＃13;

Answer 1

jQuery选择器返回一个Array对象，除非它们是相互派生的，否则它们不能被视为相等。

即。

var a = [] 
var b = []
console.log(a==b); //would output false

如果您更改了代码以选择数组中的项目，您将获得实际的DOM节点

$('li.active').next()[0] != next[0]

Answer 2

您只需检查班级名称，请查看以下更新的代码

$(document).ready(function() {
     var pageItem = $(".pagination li").not(".prev,.next");
     var prev = $(".pagination li.prev");
     var next = $(".pagination li.next");


     pageItem.click(function() {
       $('li.active').removeClass("active");
       $(this).addClass("active");
     });
  
     // stay on current button if next or prev button is ".next" or ".prev"  
     next.click(function() {
        if($('li.active').next().attr('class') != 'next') {
          $('li.active').removeClass('active').next().addClass('active');
        }
     });

     prev.click(function() {
        if($('li.active').prev().attr('class') != 'prev') {
          $('li.active').removeClass('active').prev().addClass('active');
        }
     });


   });

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<nav>
          <ul class="pagination">
            <li class="prev">
              <a href="#"><span>&laquo;</span></a>
            </li>
            <li class="active"><a href="#">1</a></li>
            <li><a href="#">2</a></li>
            <li><a href="#">3</a></li>
            <li><a href="#">4</a></li>
            <li><a href="#">5</a></li>
            <li class="next">
              <a href="#"><span>&raquo;</span></a>
            </li>
          </ul>
        </nav>