CODEWITHSUNDEEP
javascriptjqueryarraysobject
Grafit
Grafit

Reputation: 699

Insert object to specific position of array Javascript/JQuery

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>

Upvotes: 1

Views: 1293

Answers (3)

clarenswd
clarenswd

Reputation: 943

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

});

Upvotes: 0

Pedro Affonso
Pedro Affonso

Reputation: 1676

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>

Upvotes: 2

Rick Su
Rick Su

Reputation: 16440

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>

Upvotes: 1

Related Questions