Insert object to specific position of array Javascript/JQuery
Question
How do I add an object to a specific position of an array?
I got an array like defined by this:
var liList = $(".paging li");
This works, and is filled with the following two items.
<li>Previous</li>
<li>Next</li>
I want to fill it with JQuery or JavaScript like the following:
<li>Previous</a></li>
<li>1</li>
<li>2</li>
<li>3</li>
<li>Next</li>
I'm currently using the following:
for (var i = 1; i < ceil; i++){
var liItem = $('<li/>')
.text(i)
.appendTo(liList);
}
This doesn't work, and returns the following HTML:
<ul class="paging">
<li>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>7</li>
<li>8</li>
<li>9</li>
</li>
<li>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>7</li>
<li>8</li>
<li>9</li>
</li>
</ul>
How do I do this?
Edit: I also tried something like this, but it didn't work either.
for (var I = 0; i < ceil; i++){
var liding = "<li>" + i + "</li>"
liList.splice(i, 0, liding);
}
Another edit: Using this:
for (var i = 1; i < ceil; i++){
var liItem = $('<li/>')
.text(i)
.appendTo(".paging"); // or .paging
}
returns the following:
<ul class="paginering">
<li>Previous</li>
<li>Next</li>
<li>1</li><li>2</li><li>3</li><li>4</li><li>5</li><li>6</li><li>7</li><li>8</li><li>9</li>
</ul>
3 answers
solution1
2 ACCPTED 2014-12-19 14:06:20
You are using the right methods, but need some adjustments to the logic. As a general rule, never change a list while iterating over it.
The code below works by inserting multiple items after the first li found. Of course you can use a better selector for a more robust code.
var ceil = 5; var liList = $("li"); for (var i = ceil; i > 0; i--){ var liItem = "<li><a href='javascript:void(0)' onclick='changeDisplay(this)'>" + i + "</a></li>"; liList.eq(0).after(liItem); }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script> <body> <li><a onclick="changeLi(this)">Previous</a></li> <li><a onclick="changeLi(this)">Next</a></li> </body>
solution2
1 2014-12-19 13:56:53
You have appended the item to every li in the list.
The correct way is to appendTo the root , which is .paginering
for (var i = 1; i < ceil; i++){
var liItem = $('<li/>')
.text(i)
.appendTo(".paginering"); // or .paging
}
Edit
Try insertBefore
jQuery(function($) { var nextLi = $(".paging .next"); for (var i = 1; i <= 10; i++) { var liItem = $('<li/>') .text(i) .insertBefore(nextLi); } });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <ul class="paging"> <li><a href='javascript:void(0)' class="previous">Previous</a> </li> <li><a href='javascript:void(0)' class="next">Next</a> </li> </ul>
solution3
0 2014-12-19 14:29:39
if you simply want a pagination using some data stored in an array, the content can be pulled from anywhere. A fiddle... http://jsfiddle.net/clarenswd/95hy2tad/7/ Hope it helps.
$(function(){
var elementToAppend = "appended.html";
var pages = ['first.html', 'second.html', 'third.html', 'fourth.html'];
//Add an element at certain index
pages.splice(2, 0, elementToAppend);
var last = pages.length - 1;
$.each(pages, function(i, v){
i= (i==0)? 'previous' : i;
i= (i==last)? 'next' : i;
$('.paginering').append("<li><a href='"+v+"'>"+i+"</a></li>");
});
});
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.