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});
});