jquery - 过滤问题

Question

我使用 jquery 的目的如下。

我选择 z-index 低于 100 的 div，然后用蓝色类 div 围绕这些 div 内部的 img 元素。

jQuery(function($) {
$(".contentHolderUnit").each(function()
{
    if($(this).css("z-index") <  100)
    {

        $("img").wrap('<div class="blue" />');
        //$("img").css({"opacity": "0.75"});
    }
});

});

真正发生的是页面上的每个img 元素都被选中，并且由于某种原因被3类蓝色 div 包围。

目标 div 之一：（ z-index 为 100 且未被过滤掉，以及 3 个蓝色类 div）

<div class="contentHolderUnit" rel="0" id="contentHolderUnit_0" style="display: block; height: 385px; width: 520px; left: 240px; top: 15px; z-index: 100; opacity: 1;"> <div class="blue"><div class="blue"><div class="blue"><img src="any" style="height: 385px; width: 520px; opacity: 0.75; display: inline-block;"></div></div></div><div class="car">
Example Title
</div></div>

Answer 1

您在每次迭代时选择 DOM 中的所有图像，而不仅仅是带有 z-index 的元素内的图像等。我只使用过滤器和 find() 而不是循环：

jQuery(function($) {
    $(".contentHolderUnit").filter(function(i, el) {
        return el.style.zIndex < 100;
    }).find('img').wrap('<div class="blue" />')
                  .css({opacity: 0.75});
});

Answer 2

因为您的$("img")选择器正在选择页面上的每个图像。您需要像这样在父级内部进行选择：

$(this).children("img");