jQuery Prepend antes de un elemento

Question

tengo una estructura html como esto/

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

ahora quiero anteponer

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

antes de comentario-caja.

estoy enviando un formulario desde el cuadro de comentarios y una vez que sea un éxito quiero hacer el anteponer.

Answer 1

Uso before():

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

Answer 2

No sería esto más sentido ?:

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

o

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

Esto le permitiría a la agrega al comienzo de una ul list para ponerlo al final de la lista simplemente use 'append' en lugar de 'prepend' o 'appendTo' también funciona .

Answer 3

No es común tener una identificación secuencial unida a los elementos, pero un caso probable sería la inserción en un índice específico de una longitud desconocida de elementos coincidentes.

Si sabe cuántos elementos hay en la lista, puede usar nth-child o: eq para acceder directamente al elemento sin necesidad de asociar los nombres de su clase de marcado o id en el selector de jQuery.

$('li:nth-child(3)') selecciona la tercera <li> mientras que $('li:eq(3)') selecciona la cuarta porque: eq está basado en cero.

En su caso mi preferencia sería el siguiente

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

Here is a fiddle

Answer 4

Si estrictamente desea utilizar el .prepend(), el siguiente le ayudará a:

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

O

Lo mismo, utilizando .eq(), que será más elegante después de que tengas la idea principal. .eq le permite referirse a un índice particular.

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

Y finalmente llegamos a la variante corta final:

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