Question

我有一些动态生成的内容，我需要使用颜色小偷来找到主色。这是最终的动态输出：

<div class="image_product">
    <img style="display:none;" src="image1.jpg">
    <img style="display:none;" src="image2.jpg">
</div>
<div class="image_product">
    <img style="display:none;" src="image3.jpg">
    <img style="display:none;" src="image4.jpg">
</div>

这是我正在尝试的剧本：

var colorThief = new ColorThief();
$('div.image_product').each(function() {
    $(this).find('img').each(function() {
        var color = colorThief.getColor(this[0]);
        console.log(color);
    });
});

我设法让它在我知道只有一个图像的其他区域工作，具有以下代码：

var colorThief = new ColorThief();
$('div.basket_item_image').each(function() {
    if($(this).children("img").length > 0)
    {
        var img = $(this).find('img');
        var color = colorThief.getColor(img[0]);
        console.log(color);
    }
});

我知道你必须在使用JQuery时添加[0]以使其正确访问DOM，但我看不出我的中间代码是如何工作的。有什么想法吗？

Answer 1

您不需要this[0]。在each()内，this 当前正在迭代的HTML元素，而不是jQuery对象，每the docs：

更重要的是，回调是在当前DOM元素的上下文中触发的，因此关键字this指的是元素。

因此，只需使用this访问<img />内的当前元素（当前each()）。

var colorThief = new ColorThief();
$('div.image_product').each(function() {
    $(this).find('img').each(function() {
        var color = colorThief.getColor(this);
        console.log(color);
    });
});

jquery嵌套循环中的javascript颜色小偷

1 个答案: