I am currently working on developing a dynamic pagination bar. This pagination bar will dynamically clone the "li" elements based on a number received from an external webservice.
Here is the structure of my pagination element:
<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>
You may notice that the first and last "li" elements inside the Ul are static buttons for previous and next, which are not cloned and remain present at all times.
My cloning function involves selecting the second to last child of the "li" elements, cloning it with a new incremental id, and then inserting it into the ul.
This is what my function looks like:
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);
}
}
}
My issue is figuring out how to always append the cloned "li" before the last "li" of the next button element. Any suggestions on how to achieve this without changing the class attribute names?
Any ideas or tips would be greatly appreciated!