JQuery : problème .append() et $.each()

Bonjour,

J'ai un soucis lors de la construction de mon div #div, au lieu de me mettre ça :
text1 text2 text2 text2 text3

Il me met :
text1 text3 text2 text2 text2 text2

$(document).ready(function() {
                $.each(data.photosets.photoset, function (i, set) {
                                $("#div").append('text1');
                                $.each(data2.photoset.photo, function (j, item) {
                                        $("#div").append('text2');
                                });
                 });
                 $("#div").append('text3');
});

Sauriez-vous pourquoi le $.each() n'est pas effectué tout de suite, ou si c'est un problème avec .append(), qu'est-ce qu'il faudrait faire ?

Merci pour votre aide,
Nicolas

Hello,

En lisant ton code, il me semble que tu devrais obtenir:

(text1 (text2 x n) x n) text3

Ce qui correspond pas à ce que tu cherches à obtenir...

Ce qu'il faudrait plutôt, c'est créer une chaine de texte, et faire ton insertion DOM (ou plutôt innerHTML) en une seule fois. C'est beaucoup plus rapide que de faire des insertions DOM répétées. Et ça te permettra peut-être de tirer au clair ce qui se passe.

Et sinon, je ne connais pas la nature des données sur lesquelles tu boucles, mais j'ai l'impression que tu ne boucles pas sur les bonnes données. En lisant juste ce code, il me semble que ceci serait plus logique:

var $container = $("#div");
$.each(data.photosets, function (i, set) {
  $container.append('text1');
  $.each(set.photos, function (j, photo) {
    $container.append('text2');
  });
});
$container.append('text3');

Soit je déconne à plein tube, soit il nous manque trop d'informations pour dire quoi que ce soit de correct.

En fait, mon code complet est celui-ci (avec les modifs que tu m'as proposé) :

var $flickrsets = $("#flickr-sets");
$.getJSON("http://api.flickr.com/services/rest/?method=flickr.photosets.getList&format=json&api_key=bed5bc2f07ad8f8996310d18b90adf7c&thumbnail_size=sq&link_to_size=m&user_id=46241909%40N03&jsoncallback=?", function (data) {
    $.each(data.photosets.photoset, function (i, set) {
    $.getJSON("http://api.flickr.com/services/rest/?method=flickr.photosets.getPhotos&api_key=bed5bc2f07ad8f8996310d18b90adf7c&photoset_id="+set.id+"&format=json&jsoncallback=?", function (data2) {
        $flickrsets.append('<a href="photo?set='+set.id+'"><ul id="portfolio">');
        $.each(data2.photoset.photo, function (j, item) {
            $flickrsets.append('<li><img src="http://farm'+item.farm+'.static.flickr.com/'+item.server+'/'+item.id+'_'+item.secret+'_s.jpg" class="liphoto" /></li>');
        });
    });
    $flickrsets.append('</ul><p>'+set.title._content+'</p></a>');
});

Je vais essayer de faire une insertion DOM à la fin du code uniquement, et de stocker mes résultats de .each() dans une variable à la place, on va bien voir ce que ça va donner, mais j'ai peur que le résultat soit le même avec le .append()

Merci beaucoup pour ton aide en tout cas
Modifié par nicolaskern (25 Oct 2010 - 21:10)