Question

如何将对象添加到数组的特定位置？

我有一个像这样定义的数组：

var liList = $(".paging li");

这很有效，并且填写了以下两个项目。

<li>Previous</li>
<li>Next</li>

我想用JQuery或JavaScript填充它，如下所示：

<li>Previous</a></li>
<li>1</li>
<li>2</li>
<li>3</li>
<li>Next</li>

我目前正在使用以下内容：

for (var i = 1; i < ceil; i++){
 var liItem = $('<li/>')
  .text(i)  
  .appendTo(liList);
}

这不起作用，并返回以下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>

我该怎么做？

编辑：我也尝试过这样的事情，但它也没有用。

for (var I = 0; i < ceil; i++){
 var liding = "<li>" + i + "</li>"
 liList.splice(i, 0, liding);
}

另一个编辑：使用此：

for (var i = 1; i < ceil; i++){
 var liItem = $('<li/>')
  .text(i)  
  .appendTo(".paging"); // or .paging
}

返回以下内容：

<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>

Answer 1

您使用的是正确的方法，但需要对逻辑进行一些调整。作为一般规则，在迭代时不要更改列表。

以下代码的工作原理是在找到第一个li之后插入多个项目。当然，您可以使用更好的选择器来获得更强大的代码。

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>

Answer 2

您已将该项目附加到列表中的每个 li。

正确的方法是appendTo root，.paginering

for (var i = 1; i < ceil; i++){
 var liItem = $('<li/>')
  .text(i)  
  .appendTo(".paginering"); // or .paging
}

修改

尝试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>

Answer 3

如果您只想使用存储在数组中的某些数据进行分页，则可以从任何地方提取内容。小提琴... http://jsfiddle.net/clarenswd/95hy2tad/7/希望它有所帮助。

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

}）;

将对象插入到数组Javascript / JQuery的特定位置

3 个答案: