Problème lors de la création d'éléments avec jquery.append() lors de la boucle jquery.each()

Question

Cela a très bien fonctionné quand il n'y avait qu'une seule entrée dans la base de données, mais en ajouter une autre et maintenant j'ai des problèmes. Comme j'ajoute en fonction des noms de classe, chaque élément est ajouté à une seule classe. Je ne sais pas quoi faire pour créer deux "blogHeadlines" avec le contenu approprié dans chacun.

jquery:

 $(blogEntries).each(function() { 
      //Create the blog headline element   
      $('#blogPage').append($('<div class="blogHeadline">')); 

      //Add the toggle button 
      $('.blogHeadline').append('<input class="toggleButton" type="button" value="+" />'); 

      //Append the title and the date to the blogHeadline 
      $('.blogHeadline').append('<span class="blogTitle">' + this.Title + ' | </span>'); 
      //Cast the date to a Date object 
      var BlogDate = new Date(this.Date); 
      $('.blogHeadline').append('<span class="blogDate">' + BlogDate.toDateString() + '</span>'); 

      //Add the blog content element 
      $('#blogPage').append($('<div class="blogContent">')); 
      //Append the blog entry 
      $('.blogContent').append(this.Entry); 

      //Toggle the blog content 
      $('.toggleButton').live("click", function() { 
       $('.blogContent').slideToggle('slow'); 
       $('.toggleButton').val() == "+" ? $('.toggleButton').val('-') : $('.toggleButton').val('+') 
      }); 
     }); 

La sortie est bien sûr ridicule, il ressemble un peu à ceci:

Le second test | Wed Oct 27 2010test blog | Mon Sep 20 2010 Ceci est la deuxième entrée de blog de Joe Grigg

Ceci est un blog de test

test blog | Lun 20 septembre 2010

Ceci est un blog de test

Il devrait être plus comme:

Le second test | Wed Oct 27 2010

C'est la deuxième entrée de blog de Joe Grigg

Blog de test | Mon Sep 20 2010

Ceci est un blog de test.

Merci de votre aide. -Joe

Answer 1

éviter à ajouter au contenu que vous venez de créer:

$(blogEntries).each(function() { 
    //Create the blog headline element 

    var BlogDate = new Date(this.Date); 

    var Headline = $('<div class="blogHeadline" />'); 

    Headline.append('<input class="toggleButton" type="button" value="+" />') 
      .append('<span class="blogTitle">' + this.Title + ' | </span>') 
      .append('<span class="blogDate">' + BlogDate.toDateString() + '</span>') 
      .appendTo('#blogPage'); 

    // now do something similar with your Content: 
    //... 
}); 

Et $ ('togglebutton.) Vivre() n'a pas besoin d'être définie à chaque itération..