拼搶兄弟姐妹的HTML文件設置爲使用jQuery

Question

我設置元素的title屬性，和射擊的fancybox，使用此代碼元素的title標籤：

var caption = jQuery('.fancybox').siblings('p.wp-caption-text').html(); 

jQuery('.fancybox').attr({ title:caption, 'data-fancybox-group': 'gallery1'}).fancybox(); 

能正常工作時，只有一個.fancybox鏈接一個頁面，但問題當然是我想使用畫廊。

以上將變量設置爲頁面上的第一個實例，因此所有字幕都一樣。

我可以做這樣的事情，而不是？：

jQuery('.fancybox').attr({ title:'jQuery(this).siblings('p.wp-caption-text').html();', 'data-fancybox-group': 'gallery1'}).fancybox(); 

請原諒我缺乏編碼技能，但我希望它是一個人更熟悉的jQuery一個簡單的問題。

在建頁：http://professorleonidas.com/wordpress/formacao/

Answer 1

適用於每一個單獨：

var caption; 
$('.fancybox').each(function(i, elem){ 
    // Grab the caption text 
    caption = $(elem).siblings('p.wp-caption-text').html(); 

    // Set the attributes and initialize fancybox 
    $(elem).attr({ title:caption, 'data-fancybox-group': 'gallery1'}).fancybox(); 
}); 

你的「數據的fancybox組」屬性點是不是從你的問題清楚，但上述代碼將適用gallery1作爲它的值與fancybox類的所有匹配的元素。

乾杯

Answer 2

你可以把它簡單：有這個網站...

<a class="fancybox" data-fancybox-group="gallery1" href="image01.jpg">open image 01</a> 
<p>I am the caption for the image 01</p> 
<a class="fancybox" data-fancybox-group="gallery1" href="image02.jpg">open image 02</a> 
<p>I am the caption for the image 02</p> 

...使用這個腳本：

jQuery(".fancybox").fancybox({ 
beforeShow: function(){ 
    this.title = $(this.element).next('p').html(); 
} 
});