CODEWITHSUNDEEP
jqueryfunctioneach
Yunowork
Yunowork

Reputation: 345

How properly use each function in this example?

Working on this code and am quite stuck.. What I'm trying to achieve is that when there are more then 2 selections in the selection div, the overlay message's bottom position moves from 10px (defined in CSS) to 90px (defined in the jQuery). The problem is it's applying on all overlay messages (90px), even though when I log the results I get 2,3 and 4 as separate results. Why isn't it applying the results separately to each wrapper div? Isn't this what the each function does, to apply on each separate?

Thanks!

Demo: http://jsfiddle.net/6qD52/

Code:

$(".overlay").each(function() {
    selection_number = $(this).parent().find(".selections").find(".selection").length;
    console.log(selection_number);

     if ((selection_number) > 2) {
        $(".overlay_message").css({bottom: 90});
     }
});

Upvotes: 0

Views: 70

Answers (3)

palaѕн
palaѕн

Reputation: 73976

Try this:

// Selects the 'overlay_message' div inside the current 'overlay' div
$(this).find(".overlay_message").css({bottom: 90});

Instead of this:

// Selects all the 'overlay_message' div
$(".overlay_message").css({bottom: 90});

Upvotes: 2

SLaks
SLaks

Reputation: 888283

You want to select the .overlay_message that is inside the element you're operating on:

$(this).find('.overlay_message')

Upvotes: 3

Blender
Blender

Reputation: 298582

$('.overlay_message') selects all of the overlay messages. You want the one inside of your element:

$(this).find(".overlay_message").css({bottom: 90});

Upvotes: 3

Related Questions