在一个元素之前使用jQuery Prepend

Question

我有一个像这样的HTML结构：

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

现在我想要添加前缀

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

评论框之前。

我正在从评论框提交一个表单，一旦成功，我想要进行前置操作。

- Harsha M V

Answer 1

使用 before() 方法：

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

- Dr.Molle

---

@Alastair，我尝试使用prepend。但是我得到了这个<li id="comment-box"><li id="4"></li></li>的结果，所以我在这里发布了问题。 - Harsha M V

wizztjh: before()函数可以使用。我正在尝试使其滑动slideDown()，但是没有效果。http://pastebin.com/B5dyWhaB - Harsha M V

关于slideDown()：你的代码有两个问题，1.slideDown()会使用滑动动画使隐藏元素可见。如果该元素已经可见，则不会产生任何效果。2.before()不返回插入的对象，而是返回接收新对象的对象，在您的情况下将是#comment-box。我用示例制作了一个fiddle：http://www.jsfiddle.net/doktormolle/4ZpC3/ - Dr.Molle

@Alastair Pitts：当然，所有的内容都在手册里面，但在我看来，jQuery除了所有的好处之外，还是一个非常适合不太熟悉JS/DOM的人使用的工具。如果你假设这一点，可能很难找到正确的方法，所以最好先寻找类似于prepend(ing)的东西。如果你了解DOM，你就知道相应的方法叫做(insert)Before，并且可以很快地找到正确的jQuery方法。 - Dr.Molle

@Dr.Molle: 我不同意，jQuery文档非常清楚地说明了各个方法的作用，并提供了大量示例。也许这只是我查找信息的方式，但如果我不知道一个jQuery方法，我首先会查看jQuery文档。 - Alastair Pitts

@Alastair Pitts：在我看来，文档可能需要更清晰明了。解决这个问题的方法会进行一种前置操作，但是当搜索“prepend”时，在jquery-docs中没有给出“before”的链接。如果你搜索“before”，也没有给出任何链接：http://docs.jquery.com/Special:Search?search=before。这并不真的很“清晰明了”。是的，你可以阅读整个概述和操作方法，并找到正确的方法，但不太方便。@Harsha：不用谢 :) - Dr.Molle

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'也可以。

- Ryun

---

谢谢提供另一种选择 :) - Harsha M V

Answer 3

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

如果您知道列表中有多少项，则可以使用nth-child或:eq直接访问该项，而无需将标记类名或ID耦合到jQuery选择器中。

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

在您的情况下，我更喜欢以下方式

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

这里有一个fiddle

- Dylan Valade

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

- Vitaliy Penkov