谁能向我解释嵌套的每种行为？
[英]Can anyone explain this nested each behavior to me?
问题描述
<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>
and here's the javascript: 
这是javascript：
$(".img-container").each(function(){
$(".product").each(function () {
$(".sizeAvail li").each(function () {
$(this).parent().show();
});
});
}); }）;
I was expecting to get something like this, for only the first div since it's the only div with a class match: 我希望只在第一个div上得到这样的东西，因为它是唯一一个与类匹配的div：
8 7 7 7 7 7 8 7 7 7 7 7
But I got this .. essentially the nested each functions running on all divs: 8 7 7 7 7 7 7 8 8.5 9 9.5 6 7 6.5 7 8 但是我得到了..本质上嵌套了在所有div上运行的每个函数：8 7 7 7 7 7 7 8 8.5 9 9.5 6 7 6.5 7 8
Here's the link to a jFiddle: 这是jFiddle的链接：
http://jsfiddle.net/TGXsk/7/ http://jsfiddle.net/TGXsk/7/
My actual ultimate goal is to get all href values but I was working my way up to it and got stuck. 我真正的最终目标是获取所有href值，但我一直努力达到目标并陷入困境。
Any help appreciated! 任何帮助表示赞赏！
4 个解决方案
解决方案1
2 2014-01-28 21:33:28
your nested .each() aren't actually doing anything to filter your selection. 您嵌套的.each()实际上并没有做任何事情来过滤您的选择。 You need a $(this). 您需要一个$(this). to locate just those children of the parent. 只找到父母的那些孩子。
$(".img-container").each(function(){
$(this).find(".product").each(function () {
$(this).find(".sizeAvail li").each(function () {
$(this).parent().show();
});
});
});
In your example, you're essentially running nested for () loop across all elements. 在您的示例中，您实际上是在所有元素上嵌套了for () loop 。
解决方案2
2 已采纳 2014-01-28 21:39:49
Your javascript is no different than: 您的javascript不同于：
$(".sizeAvail li").each(function () {
$(this).parent().show();
});
Except that it's doing that repeatedly due to being within nested loops. 除了由于嵌套循环而重复执行该操作。
If you want specifically to search within the scope of the previous loops you need to add the selector context . 如果要专门在先前循环的范围内进行搜索，则需要添加选择器上下文 。
$(".img-container").each(function () {
$(".product", $(this)).each(function () {
$(".sizeAvail li", $(this)).each(function () {
$(this).parent().show();
});
});
});
Fiddle: http://jsfiddle.net/TGXsk/10/ 小提琴： http : //jsfiddle.net/TGXsk/10/
解决方案3
1 2014-01-28 21:33:15
解决方案4
0 2014-01-28 21:46:41
You are doing something wrong here. 您在这里做错了。 In you code: 在您的代码中：
$(".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();
});
});
});
As you mentioned : you only want to show first div which have "img-container", so for this you need to modify your code like this - 如您所述：您只想显示具有“ img-container”的第一个div，因此，您需要像这样修改代码-
$(".img-container .product .sizeAvail li").each(function(){
$(this).parent().show();
});
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.