.load () Используйте не применить к каждому объекту

Question

Я пытаюсь загрузить контент с под страницы, а затем добавляю атрибут REL для галереи, необходимой для подключения PrettyPhoto. После того, как сценарий запускается, REL был добавлен только к последнему набору изображений.

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

Как вы итерации с помощью each, вы добавляете <div class="album"> На каждой итерации:

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

А затем прямо ниже:

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

На первой итерации, $('.album').length будет один, во втором это будет два и т. Д. Последняя итерация в конечном итоге будет вызовет .load('test.html .prettyphotoalbum p > *', ... На всех трех <div class="album"> Элементы, которые вы добавили.

Я думаю, вы хотите просто связать load к тому, что вы только что создали:

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

Кроме того, вам нужен только один .live Позвоните, так что переместите это:

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

вне .each. Анкет Так что что -то подобное должно работать лучше:

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;    
    });
}