谁能向我解释嵌套的每种行为？

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

除了由于嵌套循环而重复执行该操作。

如果要专门在先前循环的范围内进行搜索，则需要添加选择器上下文。

$(".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();
});

尝试摆弄

谁能向我解释嵌套的每种行为？

问题描述

4 个解决方案

解决方案1
2 2014-01-28 21:33:28

解决方案2
2 已采纳 2014-01-28 21:39:49

解决方案3
1 2014-01-28 21:33:15

解决方案4
0 2014-01-28 21:46:41

谁能向我解释嵌套的每种行为？

问题描述

4 个解决方案

解决方案1 2 2014-01-28 21:33:28

解决方案2 2 已采纳 2014-01-28 21:39:49

解决方案3 1 2014-01-28 21:33:15

解决方案4 0 2014-01-28 21:46:41

解决方案1
2 2014-01-28 21:33:28

解决方案2
2 已采纳 2014-01-28 21:39:49

解决方案3
1 2014-01-28 21:33:15

解决方案4
0 2014-01-28 21:46:41