.load（）使用不適用於每個對象

Question

我想從子頁面加載內容，然後爲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> 

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">Ø n各自迭代：

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