jQuery Prepend avant un élément

Question

J'ai une structure html comme celui-ci/

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

maintenant je veux précédez

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

avant-case commentaire.

Je soumets un formulaire de la boîte de commentaire et une fois c'est un succès je veux faire le préfixe.

Answer 1

Utilisation before():

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

Answer 2

Ne serait-ce plus logique ?:

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

ou

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

Cela vous permettra d'ajouter au début d'une ul liste pour le mettre à la fin de la liste il suffit d'utiliser 'append' plutôt que 'prepend' ou 'appendTo' fonctionne aussi .

Answer 3

Il est rare qu'un identificateur séquentiel soit associé à des éléments, mais un cas probable serait l'insertion à un index spécifique d'une longueur inconnue d'éléments correspondants. Si vous connaissez le nombre d'éléments dans la liste, vous pouvez utiliser nth-child ou: eq pour accéder directement à l'élément sans avoir besoin de coupler vos noms de classes ou identifiants dans le sélecteur jQuery.

$('li:nth-child(3)') sélectionne le troisième <li> tandis que $('li:eq(3)') sélectionne le quatrième parce que: eq est basé sur zéro.

Dans votre cas, ma préférence serait la suivante

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

Here is a fiddle

Answer 4

Si vous voulez strictement utiliser le .prepend(), ce qui suit vous aidera à:

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

La même chose, en utilisant .eq(), ce qui sera plus élégant après avoir eu l'idée principale. .eq vous permet de faire référence à un index particulier.

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

Et enfin nous sommes venus à la variante courte finale:

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