分頁：使用jquery刪除元素？

Question

我有一個部分，我必須分頁記錄。 現在的問題是多少被添加，但我想刪除分組數

目前我已經有如下一些：

上一頁1 2 3下一頁

當我在未來4單擊被添加並且變得 上一個1 2 3 4 5

當我點擊下一個5再次被添加並且變得 上一個1 2 3 4 5下一頁

什麼，我試圖做的，哪些應該有

上一頁1 2 3下一頁

當我點擊下一個4被添加，它應該成爲 上一頁1 2 3 4下一頁

當我點擊下一個5再次被添加，並且變得 一個3 4 5下一頁

當我上單擊現在，應該是 上一頁1 2 3 4下一頁

請在下面找到我運行的代碼：

$('ul.pagination').on('click', 'a', function() { // listen for click on pagination link 
 
    if($(this).hasClass('active')) return false; 
 
    
 
    var active_elm = $('ul.pagination a.active'); 
 
    
 
    if(this.id == 'next'){ 
 
     var _next = active_elm.parent().next().children('a'); 
 
     if($(_next).attr('id') == 'next') { 
 
     
 
     // appending next button if reach end 
 
     var num = parseInt($('a.active').text())+1; 
 
     active_elm.removeClass('active'); 
 
     $('<li><a class="active" href="#">'+num+'</a></li>').insertBefore($('#next').parent()); 
 
     return; 
 
     } 
 
     _next.addClass('active'); 
 
     
 
     
 
     
 
     
 
    } 
 
    else if(this.id == 'prev') { 
 
     var _prev = active_elm.parent().prev().children('a'); 
 
     if($(_prev).attr('id') == 'prev') return false; 
 
     _prev.addClass('active'); 
 
    } else { 
 
     $(this).addClass('active'); 
 
    } 
 
    active_elm.removeClass('active'); 
 
    
 
});

ul.pagination { 
 
    display: inline-block; 
 
    padding: 0; 
 
    margin: 0; 
 
} 
 

 
ul.pagination li {display: inline;} 
 

 
ul.pagination li a { 
 
    color: black; 
 
    float: left; 
 
    padding: 8px 16px; 
 
    text-decoration: none; 
 
    transition: background-color .3s; 
 
    border: 1px solid #ddd; 
 
} 
 

 
ul.pagination li a.active { 
 
    background-color: #4CAF50; 
 
    color: white; 
 
    border: 1px solid #4CAF50; 
 
} 
 

 
ul.pagination li a:hover:not(.active) {background-color: #ddd;} 
 

 
div.center {text-align: center;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="center"> 
 
    <ul class="pagination"> 
 
    <li><a id="prev">«</a></li> 
 
    <li><a id="test1" href="#">1</a></li> 
 
    <li><a id="test2" class="active" href="#">2</a></li> 
 
    <li><a href="#">3</a></li> 
 
    <li><a href="#" id="next">»</a></li> 
 
    </ul> 
 
</div>

Answer 1

這裏是我會怎麼做之後。
我會添加一個類到3 <li>標籤裏面的數字，以方便用jQuery選擇器訪問。 裏面，你檢查的天氣下一個按鈕具有ID next if語句，刪除第一個孩子，像這樣：

$('.three_links').first().remove(); 

和最後一個孩子後添加一個數字，像這樣：

$('.three_links').last().after('<li class="three_links"><a class="active" href="#">'+num+'</a></li>'); 

如果id爲prev刪除最後一個孩子，第一個孩子之前加上對上號，但只有當先前的數大於1：

if(num > 0){ 
    active_elm.removeClass('active'); 
    $('.three_links').last().remove(); 
    $('.three_links').first().before('<li class="three_links"><a class="active" href="#">'+num+'</a></li>'); 
} 

Here is a working jsfiddle.

HTML：

<div class="center"> 
    <ul class="pagination"> 
     <li><a href="#" id="prev">«</a></li> 
     <li class="three_links"><a id="test1" href="#">1</a></li> 
     <li class="three_links"><a id="test2" class="active" href="#">2</a></li> 
     <li class="three_links"><a id="test3" href="#">3</a></li> 
     <li><a href="#" id="next">»</a></li> 
    </ul> 
</div> 

JS：

$('ul.pagination').on('click', 'a', function() { // listen for click on pagination link 
    if($(this).hasClass('active')) return false; 

    var active_elm = $('ul.pagination a.active'); 

    if(this.id == 'next'){ 
     var _next = active_elm.parent().next().children('a'); 
     if($(_next).attr('id') == 'next') { 

      // appending next button if reach end 
      var num = parseInt($('a.active').text())+1; 
      active_elm.removeClass('active'); 
      $('.three_links').first().remove(); 
      $('.three_links').last().after('<li class="three_links"><a class="active" href="#">'+num+'</a></li>'); 
      return; 
     } 
     _next.addClass('active'); 
    } 
    else if(this.id == 'prev') { 
     var _prev = active_elm.parent().prev().children('a'); 
     if($(_prev).attr('id') == 'prev'){ 
      var num = parseInt($('a.active').text())-1; 
      if(num > 0){ 
       active_elm.removeClass('active'); 
       $('.three_links').last().remove(); 
       $('.three_links').first().before('<li class="three_links"><a class="active" href="#">'+num+'</a></li>'); 
      } 
      return; 
     } 
     _prev.addClass('active'); 
    } else { 
     $(this).addClass('active'); 
    } 
    active_elm.removeClass('active'); 
}); 

Answer 2

使用此添加下一個號碼

$('#prev').parent().next().remove(); 

Codepen http://codepen.io/mastersmind/pen/ZBJZjo

Answer 3

使用下面的腳本：

$('ul.pagination').on('click', 'a', function() { // listen for click on pagination link 
    if($(this).hasClass('active')) return false; 

    var active_elm = $('ul.pagination a.active'); 

    if(this.id == 'next'){ 
     var _next = active_elm.parent().next().children('a'); 
     if($(_next).attr('id') == 'next') { 

     // appending next button if reach end 
     var num = parseInt($('a.active').text())+1; 
     active_elm.removeClass('active'); 
     $('<li><a class="active" href="#">'+num+'</a></li>').insertBefore($('#next').parent()); 
     var hidenum = parseInt($('a.active').text())-2; 
     if(hidenum > 0){ 
      $('#next').parent().prev().prev().prev().prev().hide(); 
     } 
     return; 
     } 
     _next.addClass('active'); 




    } 
    else if(this.id == 'prev') { 
     var _prev = active_elm.parent().prev().children('a'); 
     if($(_prev).attr('id') == 'prev') return false; 
     _prev.addClass('active'); 
    } else { 
     $(this).addClass('active'); 
    } 
    active_elm.removeClass('active'); 

});