CODEWITHSUNDEEP
javascriptjqueryhtml
moses5407
moses5407

Reputation: 33

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:

$(".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:

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

Here's the link to a jFiddle:

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.

Any help appreciated!

Upvotes: 0

Views: 53

Answers (4)

Ishan Jain
Ishan Jain

Reputation: 8171

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 .product .sizeAvail li").each(function(){
   $(this).parent().show();
});

Try in fiddle

Upvotes: 0

McAden
McAden

Reputation: 13970

Your javascript is no different than:

$(".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/

Upvotes: 2

Patrick Moore
Patrick Moore

Reputation: 13344

your nested .each() aren't actually doing anything to filter your selection. You need a $(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.

Upvotes: 2

Alessandro Minoccheri
Alessandro Minoccheri

Reputation: 35973

try this:

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

DEMO

Upvotes: 1

Related Questions