jQuery Prepend 在元素之前

Posted 2023-04-13

【中文标题】jQuery Prepend 在元素之前

【英文标题】：jQuery Prepend before an element

【发布时间】：2010-11-17 07:07:06

【问题描述】：

我有一个这样的html结构/

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

现在我想添加

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

在评论框之前。

我正在从评论框中提交一个表单，一旦成功，我就想做前置。

【参考方案1】：

使用before():

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

【讨论】：

@Alastair 我尝试使用前置。但我得到了这个 所以我在这里发布了问题

wizztjh: before() 有效。我想做的是slideDown。这没有发生。 pastebin.com/B5dyWhaB

关于slideDown()：您的代码中有两个问题，1. slideDown() 通过滑动动画使隐藏元素可见。如果元素已经可见，则不会产生任何效果。 2. before() 返回也不是插入的对象，它返回接收新对象的对象，在你的情况下它将是#comment-box。我做了一个例子：jsfiddle.net/doktormolle/4ZpC3

@Alastair Pitts：当然，这一切都在手册中，但在我看来，jQuery 不仅具有所有优点，而且对于不太熟悉 JS/DOM 的人来说也是一个很好的工具。如果您假设这一点，那么找到正确的方法可能并不容易，因此您首先寻找类似 prepend(ing) 的方法是很正常的。如果你知道 DOM，你就会知道类似的方法被调用 (insert)Before 并且会很快找到正确的 jQuery 方法。

@Dr.Molle：我不同意，jQuery 文档非常清楚哪些方法做什么，并且有一堆示例。可能只是我查找资料的方式，但是如果我不知道jQuery方法，我首先看的是jQuery文档。

【参考方案2】：

这不是更有意义吗？：

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

或

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

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

【讨论】：

感谢您的选择:)

【参考方案3】：

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

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

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

在你的情况下，我的偏好是以下

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

Here is a fiddle

【参考方案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>");