Question

我正在尝试提取图像以在li元素上显示为背景图像。

li的确切数目是不确定的，但是我的代码在处理此问题方面效率不高，因为我不得不手动将其写入。我不确定最好的遍历此方法的方式，以便在更多情况下不需要手动处理李的被添加。

$('.carousel').each(function(){ 

    var i = 0; 
    $(this).find("li").each(function(){
        i++;
        $(this).addClass('thumbnail'+i); 


    });  

    $(this).find("li.thumbnail1").css('background-image', 'url(' + $(this).find('.item:nth-child(1) img').attr('src') + ')');
    $(this).find("li.thumbnail2").css('background-image', 'url(' + $(this).find('.item:nth-child(2) img').attr('src') + ')');
    $(this).find("li.thumbnail3").css('background-image', 'url(' + $(this).find('.item:nth-child(3) img').attr('src') + ')');
    $(this).find("li.thumbnail4").css('background-image', 'url(' + $(this).find('.item:nth-child(4) img').attr('src') + ')');
    $(this).find("li.thumbnail5").css('background-image', 'url(' + $(this).find('.item:nth-child(5) img').attr('src') + ')');

});

Answer 1

var that = this;
$(this).find("li").each(function(index){
    var imgSrc = $(that).find('.item:nth-child(' + (index+1) + ') img').attr('src');
    $(this).css('background-image', 'url(' + imgSrc + ')');
});

我认为这比您正在做的事情更有意义。 jQuery .each函数将Index作为第一个参数，因此如果需要，您可以找到具有相同索引的匹配.item

Answer 2

使用$ .each（）函数时，可以向其传递一些参数。例如：

$(this).find("li").each(function(i, o){ });

其中 i 是索引，而 o 是对象本身（在您的情况下为 li 元素）。因此，您可以尝试执行以下操作：

$(this).find("li.thumbnail" + i).css('background-image', 'url(' + $(this).find('.item:nth-child('+ (i - 1) + ') img').attr('src') + ')');

Answer 3

像这样重写它会更有效率。

each()

存储轮播的范围li使您可以在each()的{{1}}范围内与其进行交互。无需声明单独的i变量，因为在调用each()时传递给函数的第一个参数是当前项的索引。

如何通过循环使此代码高效？

3 个答案: