jQuery 在元素之前添加

Question

我有一个像这样的 html 结构/

<li id="1"></li>
<li id="2"></li>
<li id="3"></li>
<li id="comment-box"></li>

现在我想

<li id="4"></li>

在评论框之前添加。

我正在从评论框中提交一份表格，一旦成功，我想在前面添加。

Answer 1

使用 before()：

$('#comment-box').before('<li id="4"></li>')

Answer 2

这不是更有意义吗？：

$('ul#comments_container').prepend('<li id="4"></li>');

或者

$('<li id="4"></li>').hide().prependTo('Ul#comments_container').slideDown("slow");

这将允许您将其添加到 ul 列表的开头，将其放在列表的末尾，只需使用“append”而不是“prepend”或“appendTo”也可以。

Answer 3

将顺序 id 附加到元素的情况并不常见，但可能的情况是在未知长度的匹配元素的特定索引处插入。

如果您知道列表中有多少个项目，那么您可以使用 nth-child 或 :eq 直接访问该项目，而无需将标记类名称或 id 连接到 jQuery 选择器中。

$('li:nth-child(3)') 选择第三个

而 $('li:eq(3)')< /code> 选择第四个，因为 :eq 是从零开始的。

在你的情况下，我的偏好如下

$('li:last').prepend('<li>Fourth item</li>');

Here is a fiddle

Answer 4

如果你严格想使用 .prepend()，以下内容将帮助你：

// this gives you a list with all matching elements
var elementsList = $("li");  

// this refers to an element at required index and wraps it into a jQuery object           
var elementAtIndex = $(elementsList[your index]);   

// and finally apply change
elementAtIndex.prepend("<li id=\"4\"></li>");

或者

同样，使用 .eq()，在你掌握主要想法后，这会更优雅。 .eq 允许您引用特定索引。

 var elementAtIndex= $("li").eq(your index);  
 elementAtIndex.prepend("<li id=\"4\"></li>");

最后我们得出了最终的简短变体：

 $("li").eq(index).prepend("<li id=\"4\"></li>");