Question

目前我有一个同位素页面的元素列表。元素的基本标记是：

<div class="element conference-box"> <a href="#"><img src="#" class="conference-image" alt=""></a>
    <div class="caption">
      <div class="confback"></div>
      <h3 class="conference-title"></h3>
      <h4 class="conference-details"></h4>
    </div>
</div>

页面上大约有30个元素。

我一直在尝试使用jQuery来获取图像＆＃34; conference-image＆＃34;并将其作为背景图像应用于.confback div，同时保留原始图像。我使用这段代码取得了一些成功：

$('.element').each(function() {
    var getImageSrc = $('.conference-image').attr('src');
    $('.confback').css('background-image', 'url(' + getImageSrc + ')');
    return true;
});

但是，我的脚本从第一个元素中获取图像，并将其作为背景图像应用于页面上每个元素中的每个.confback div。显然，我希望每个单独的元素都使用在该特定元素中使用的图像。

Answer 1

在.each回调中，this变量将是当前正在循环的.element。您可以使用它来搜索您想要使用的img和div的元素，方法是使用jQuery并使用find方法重新包装它：

$('.element').each(function() {
    var getImageSrc = $(this).find('.conference-image').attr('src');
    $(this).find('.confback').css('background-image', 'url(' + getImageSrc + ')');
});

另请注意，.each的文档说：

使用return false提前打破每个（）循环。

这并不意味着您必须使用return true来继续循环，不返回任何内容也是有效的 - 所以我从上面的示例中删除了它。

Answer 2

在.each函数$(this)中，将是类element的元素。您想使用find找到的后代的属性和CSS：

$('.element').each(function() {
    var getImageSrc = $(this).find('.conference-image').attr('src');
    $(this).find('.confback').css('background-image', 'url(' + getImageSrc + ')');
});

JQuery循环重复结果

2 个答案: