Question

<html>
<body>
<div class="img-container">8
    <div class="product">
        <ul class="sizeAvail" style="display:none;">
            <li><a href="one"></a>7</li>
            <li><a href="one"></a>7</li>
            <li><a href="one"></a>7</li>
            <li><a href="one"></a>7</li>
            <li><a href="one"></a>7</li>
        </ul>
    </div>
</div>
<div class="imgblock">7
    <div class="product">
        <ul class="sizeAvail" style="display:none;">
            <li><a href="one"></a>8</li>
            <li><a href="one"></a>8.5</li>
            <li><a href="one"></a>9</li>
            <li><a href="one"></a>9.5</li>
        </ul>
    </div>
</div>
<div class="imagearea">6
    <div class="product">
        <ul class="sizeAvail" style="display:none;">
            <li>7</li>
            <li>6.5</li>
            <li>7</li>
            <li>8</li>
        </ul>
    </div>
</div>
</body>

这是javascript：

$(".img-container").each(function(){
$(".product").each(function () {
    $(".sizeAvail li").each(function () {
            $(this).parent().show();
    });
});

}）;

我期待得到这样的东西，因为它只是第一个div，因为它是唯一一个有类匹配的div：

8 7 7 7 7 7

但是我得到了这个...基本上嵌套在所有div上运行的每个函数： 8 7 7 7 7 7 7 8 8.5 9 9.5 6 7 6.5 7 8

这是jFiddle的链接：

http://jsfiddle.net/TGXsk/7/

我的实际最终目标是获得所有href值，但我正在努力实现它并陷入困境。

任何帮助表示赞赏！

Answer 1

您的嵌套.each()实际上没有做任何事情来过滤您的选择。您需要$(this).才能找到父母的子女。

$(".img-container").each(function(){
    $(this).find(".product").each(function () {
        $(this).find(".sizeAvail li").each(function () {
            $(this).parent().show();
        });
    });

});

在您的示例中，您实际上是在所有元素中运行嵌套的for () loop。

Answer 2

您的javascript与以下内容没有什么不同：

$(".sizeAvail li").each(function () {
    $(this).parent().show();
});

除非由于在嵌套循环中而重复执行此操作。

如果您想专门在之前的循环范围内进行搜索，则需要添加selector context。

$(".img-container").each(function () {
    $(".product", $(this)).each(function () {
        $(".sizeAvail li", $(this)).each(function () {
            $(this).parent().show();
        });
    });
});

小提琴：http://jsfiddle.net/TGXsk/10/

Answer 3

试试这个：

$(".img-container").each(function(){
    $(this).find(".product").each(function () {
        $(this).find(".sizeAvail li").each(function () {
            $(this).parent().show();
         });
    });
});

DEMO

Answer 4

你这里做错了什么。在你的代码中：

$(".img-container").each(function(){/* Select all elements with "img-container" class */
  $(".product").each(function () {/* Select all elements with "product" class (not only child of "img-container" div ) */
     $(".sizeAvail li").each(function () {/* Select all child li elements with-in "sizeAvail" class */
            $(this).parent().show();
     });
  });
});

正如你所提到的：你只想显示第一个有“img-container”的div，所以你需要像这样修改你的代码 -

$(".img-container .product .sizeAvail li").each(function(){
   $(this).parent().show();
});

Try in fiddle

谁能解释这个嵌套的每个行为给我？

4 个答案: