.load() 使用不适用于每个对象答案

【问题标题】：.load() use not applying to every object.load() 使用不适用于每个对象
【发布时间】：2011-11-11 19:51:14
【问题描述】：

我正在尝试从子页面加载内容，然后为 prettyPhoto 插件所需的图库添加 rel 属性。脚本运行后，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>

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

    }); 
}

【问题讨论】：

标签： jquery ajax load each prettyphoto

【解决方案1】：

当您使用each 进行迭代时，您将在每次迭代中添加一个<div class="album">：

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

然后在它的正下方：

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

在第一次迭代中，$('.album').length 将是一个，在第二次它将是两个，依此类推。最后的迭代最终将在您添加的所有三个 <div class="album"> 元素上调用 .load('test.html .prettyphotoalbum p > *', ...。

我认为您只想将 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;    
    });
}

【讨论】：