javascript - 获取图像 src 然后将其应用为 .each 循环中的 href

我有一个用 jQuery Cycle 构建的内容旋转器，并尝试向其中添加 jQuery Fancybox。

HTML:

<div class="secRotatorSlide">
    <a href="" class="iframe enlargePic">Enlarge</a>
    <img class="slideImg" src="secRotatorImg/slide1.png" alt="Slide 1" />
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>

上述 HTML 有多组。全部旋转正确。

jQuery:

jQuery('.secRotatorSlide').find('.slideImg').each(function() {
    var iframeSrc = jQuery(this)[0].src;
    //alert(iframeSrc)
    jQuery('a.enlargePic').attr('href', iframeSrc);    
});

如果我注释掉设置 href 的行，并取消注释警报行，它将依次正确地警告每个 src。如果我保持原样，它会从最后一组 html 中获取图像 src，并将其应用于所有 html 组中所有内容的每个 href。

我做错了什么？我认为它在 jQuery 的最后一行，但我不确定。我尝试在最后一行中使用 this，但这根本没有任何作用。

最佳答案

您的选择器 jQuery('a.enlargePic') 太通用了。这将找到 DOM 中所有匹配的元素，您将继续为其设置 href 值。您需要限制其范围。

尝试: jQuery(this).siblings('a.enlargePic').attr('href', iframeSrc);

这样，您只需为正在处理的元素的同一父级(同级)的子级元素设置值。

http://api.jquery.com/siblings/

编辑:如果所有图像和 anchor 共享同一个父级，则考虑 $.prev()

关于javascript - 获取图像 src 然后将其应用为 .each 循环中的 href，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/19036783/