过滤问题答案

【问题标题】：Filtering issue过滤问题
【发布时间】：2013-05-13 23:09:04
【问题描述】：

我使用 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>

【问题讨论】：

$("img") 将包装所有img 标签。应该是$(this)。

标签： jquery css

【解决方案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});
});

【讨论】：

救命稻草回答！非常感谢！

【解决方案2】：

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

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

【讨论】：