Insertion Div au-dessus des autres Div

Question

J'ai actuellement un formulaire qui soumet par ajax et quand il est réussi il met l'information en haut d'une liste.

Ma configuration actuelle est

<div id="projects"> 
    <div class="project"> 
     .... 
    </div> 
    <div class="project"> 
     .... 
    </div> 
    .... 
</div> 

Et je ne l'encartage par

var project = $('<div class="project">' + 
         '<div class="name">'+data.title+'</div>' + 
         '<div class="desc">'+data.desc+'</div>' + 
       '</div><hr />').fadeIn(1000, function() { } 
            ); 
$('.project:first-child').before(project); 
$('.project:first-child').highlightFade({color:'#e3e373',speed:4000,iterator:'exponential'}); 

Cela fonctionne bien une fois il y a quelque chose dans la liste, mais quand il n'y a rien là, il échoue (parce qu'il peut Ne pas trouver une classe avec le projet

Comment est-ce que je ferais pour améliorer ceci ainsi cela fonctionnera même s'il n'y a aucun projet dans la liste?

Answer 1

Je le ferais légèrement différemment. D'abord, j'éviterais de construire le balisage de cette façon, au moins par parties. Si data.title contient, par exemple, < alors il ne sera pas échappé correctement. Il est préférable d'utiliser text() pour cela. Deuxièmement, il est plus rapide de créer des éléments DOM plutôt que d'insérer un balisage brut. Dans ce cas $("<div>") est équivalent à $(document.createElement("div")).

Troisièmement, utilisez prependTo pour insérer le contenu. Ensuite, vous n'avez aucun problème.

Alors:

$("<div>").addClass("project") 
    .appendChild($("<div>").addClass("name").text(data.title)) 
    .appendChild($("<div>").addClass("desc").text(data.desc)); 
    .hide().prependTo("#projects").fadeIn(1000);