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>

@OneWay I looked into the splice function, but this didn't seem to work. I'll edit my post so you can see what I tried — Grafit
– Grafit, Commented Dec 19, 2014 at 13:55

Pedro Affonso · Accepted Answer · 2014-12-19 14:06:20Z

2

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>

answered Dec 19, 2014 at 14:06

Pedro Affonso

1,69616 silver badges26 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Grafit Over a year ago

Excuse me, some bug here. Works great now!

Rick Su · Accepted Answer · 2014-12-19 14:05:35Z

1

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>

edited Dec 19, 2014 at 14:05

answered Dec 19, 2014 at 13:56

Rick Su

16.5k3 gold badges35 silver badges51 bronze badges

3 Comments

Grafit Over a year ago

This works better, but the problem is that everything is placed at the end of the array, I want it between the <li>Previous</li> and the <li>Next</li>

Pointy Over a year ago

@Grafit the task would be made much easier if you'd add "class" attributes to those elements so that they can be easily located by the code.

Grafit Over a year ago

I tried this, it seemed great. Now I see that the created <li> elements are inserted inside of the 'next' li.

clarenswd · Accepted Answer · 2014-12-19 14:34:46Z

0

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>");
});

});

edited Dec 19, 2014 at 14:34

answered Dec 19, 2014 at 14:29

clarenswd

9439 silver badges17 bronze badges

Collectives™ on Stack Overflow

Insert object to specific position of array Javascript/JQuery

3 Answers 3

1 Comment

3 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related