jQuery Prepend before an element

筅森魡賤 提交于 2021-02-04 13:07:40

问题


I have a html structure like this/

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

now i wanna prepend

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

before comment-box.

i am submitting a form from the comment box and once its a success i wanna do the prepend.


回答1:


Use before():

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



回答2:


Wouldn't this make more sense?:

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

or

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

This would allow you to add it to the beginning of a ul list to put it at the end of the list just use 'append' rather than 'prepend' or 'appendTo' also works.




回答3:


It is uncommon to have a sequential id attached to elements but a likely case would be inserting at a specific index of a unknown length of matching elements.

If you know how many items are in the list then you can use nth-child or :eq to directly access the item without needing to couple your markup class names or id's into the jQuery selector.

$('li:nth-child(3)') selects the third <li> while $('li:eq(3)') selects the fourth because :eq is zero based.

In your case my preference would be the following

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

Here is a fiddle




回答4:


If you strictly want to use the .prepend(), the following will help you:

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

OR

The same, using .eq(), which will be more elegant after you got the main idea. .eq allows you to refer at particular index.

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

And finally we came to the final short variant:

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


来源:https://stackoverflow.com/questions/4202215/jquery-prepend-before-an-element

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!