How to not switch to the first or last "li element" when they are next in line?

Question

I have a pagination bar and it will switch to the next button if you click the "next" or "prev" arrow buttons.

I wrote some code to stay on the current "page" number if the next item in the list is ".next" or ".prev", but it is not working.

What am I missing?

$(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');
        }
     });


   });

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

sjm · Answer 1 · 2015-07-19T02:32:17.267

2

jQuery selectors return an Array object, objects cannot be deemed equal unless they are derived from each other.

i.e.

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

If you changed you code to select the item in the array you would get the actual DOM node

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

edited Jul 19 '15 at 02:32

answered Jul 18 '15 at 07:00

sjm

5,378
1
26
37

Thanks for your explaining. – Dreams Jul 18 '15 at 07:04

score 1 · Accepted Answer · answered Jul 18 '15 at 06:51

All you need to check the class name, Please check below updated code

$(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>

Thanks.Why my var next = $(".pagination li.next"); and i set if($('li.active').next() != next) is not working? — Dreams, Jul 18 '15 at 06:56
These object are not equal cause they got other references. One is direct other is next of currnet li. Please read some of the way around here http://stackoverflow.com/questions/16358752/jquery-objects-of-the-same-element-are-not-equal — Umesh Aawte, Jul 18 '15 at 07:11

How to not switch to the first or last "li element" when they are next in line?

2 Answers2