过滤问题

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