.load () utiliser ne pas appliquer à tous les objets

Question

Je suis en train de charger le contenu dans des pages sous, puis ajoutez l'attribut rel pour une galerie requise par la prise prettyPhoto. Une fois le script exécute le rel n'a été ajouté à la dernière série d'images. \

HTML

<div class="prettyphotothumb">
    <ul class="navsub">
    <li><a href="album.html"><img src="images/thumbnail.jpg" alt="" />Album</a></li>
    <li><a href="blarg.html"><img src="images/thumbnail.jpg" alt="" />Blarg</a></li>
    <li><a href="test.html"><img src="images/thumbnail.jpg" alt="" />Test</a></li>
    </ul>
</div>

JS

if($('div.prettyphotothumb').length > 0) {
    $('div.prettyphotothumb a').each(function() {
        var pageLink = $(this);
        var albumTitle = $(pageLink).text();
        var album = $('<div class="album"></div>').appendTo( $(pageLink).parent());

        $('.album').load(this.href+' .prettyphotoalbum p > *',null,function(){  
            album.children('a').attr('rel','prettyPhoto['+albumTitle+']');
        });

        $('a[rel^="prettyPhoto"]').live("click",function() {
            $.prettyPhoto.open($(this).attr("href"),"","");
            return false;
        });         

    }); 
}

Answer 1

Comme vous itérer en utilisant each, vous ajoutez un <div class="album"> à chaque itération:

var album = $('<div class="album"></div>').appendTo( $(pageLink).parent());

Et puis à droite en dessous:

$('.album').load(//...

A la première itération, $('.album').length sera l'un, sur la seconde, il sera deux, etc. La dernière itération finira par appeler .load('test.html .prettyphotoalbum p > *', ... sur les trois éléments de <div class="album"> que vous avez ajouté.

Je pense que vous voulez simplement lier la load à la chose que vous venez de créer:

// Use album rather than $('.album')
album.load(this.href+' .prettyphotoalbum p > *',null,function(){  
    album.children('a').attr('rel','prettyPhoto['+albumTitle+']');
});

En outre, vous avez seulement besoin d'un appel .live donc déplacer ceci:

$('a[rel^="prettyPhoto"]').live("click",function() {
    $.prettyPhoto.open($(this).attr("href"),"","");
    return false;
});

en dehors du .each. Donc, quelque chose comme cela devrait fonctionner mieux:

if($('div.prettyphotothumb').length > 0) {
    $('div.prettyphotothumb a').each(function() { 
        var pageLink   = $(this);
        var albumTitle = $(pageLink).text();
        var album      = $('<div class="album"></div>').appendTo($(pageLink).parent());

        album.load(this.href+' .prettyphotoalbum p > *', null, function() { 
            album.children('a').attr('rel', 'prettyPhoto[' + albumTitle + ']');
        });
    });

    $('a[rel^="prettyPhoto"]').live("click", function() {
        $.prettyPhoto.open($(this).attr("href"), "", "");
        return false;    
    });
}