jQuery克隆幾個「li」並附加在ul的特定位置（不是它的結尾）

Question

正在開發一個動態分頁欄，其中「li」被克隆n次，具體取決於從外部Web服務接收到的數字。

這裏是我的分頁元素：

<ul class="pagination"> 
      <li class="pagePrevious" name="previous"> 
       <a href="#" aria-label="Previous"> <span aria-hidden="true">«</span> </a> 
      </li> 

      <li class="page" name="1"><a href="#" class="is-active">1</a></li> 

      <li class="pageNext" name="next"> 
       <a href="#" aria-label="Next"> <span aria-hidden="true">»</span> </a> 
      </li> 
</ul> 

看樣子你可能會注意到，我的第一個Li和我的UI的內最後李是下一個和以前的按鈕，這不是克隆，他們是靜態始終存在。

我的克隆功能選擇直接第二個li的最後一個孩子，並用動態增量ID克隆它，最後將它插入到ul中。

我fonction：

createPagination: function (nb) { 
      var lastLI = $('.pagination li').last().prev(); 
      var num = lastLI.attr('name'); 

      for (var i = num; i <= nb ; i++) { 
       if (i != num) { 
        var cloned = lastLI.clone().attr('name', i); 
        $(cloned).find('a').text(i); 
        $('ul').append(cloned); 
       } 
      } 
     } 

我的問題是如何使Next按鈕的最後一里之前，請務必追加克隆裏。 ??? 請注意，我不改變其他規格的屬性名稱

任何建議？

Answer 1

使用.before()將某些東西放在另一個元素的前面。

createPagination: function (nb) { 
    var nextLI = $('pagination .pageNext'); 
    var lastLI = nextLI.prev(); 
    var num = lastLI.attr('name'); 

    for (var i = num+1; i <= nb ; i++) { 
     var cloned = lastLI.clone().attr('name', i); 
     cloned.find('a').text(i); 
     nextLI.before(cloned); 
    } 
} 

BTW，你不需要寫$(cloned)，因爲cloned已經是一個jQuery對象。如果您在num+1開始for循環，則不需要檢查if (i != num)。

Answer 2

的解決方案是不是simlply使用附加的fonction的insertBefore：

var lastLI = $('.pagination li').last().prev(); 
      var nextLI= $('.pagination li').last(); 
      var num = lastLI.attr('name'); 

      for (var i = num; i <= nb ; i++) { 
       if (i != num) { 
        var clone = lastLI.clone().attr('name', i); 
        $(clone).find('a').text(i); 
        clone.insertBefore(nextLI); 
        clone.removeClass("is-active") 
       } 
      }