jQuery create function and call it on each separately

Question

Hey guys I'm trying to create a function and call it inside another each loop. I got it to work, but the each loop is not working. So I tried to add an extra $(this) and it didn't work either...any help is appreciated.

.moveClass {
position:relative;
}

$(function() {

$('.a_projectLoad').each(function(evt){
    $(this).hover(function(){
        $(this).slideRight();
    });
});

});

function slideRight () {
    $('.img_rightArrow')
        .addClass('moveClass')
        .animate({"left": "+=50px"}, "fast");
}

<table>
             <tr>
                <td><a href="#" class="a_projectLoad">Title Goes Here</a></td>
                <td ><img src="images/btn_loadProject.png" class="img_rightArrow"/></td>
              </tr>
              <tr>
                <td><a href="#" class="a_projectLoad">Title Goes Here</a></td>
                <td><img src="images/btn_loadProject.png" class="img_rightArrow"/></td>
              </tr>
</table>

lsuarez · Accepted Answer · 2011-03-10 19:51:13Z

1

Add the position: relative attribute to your images directly as part of the markup rather than programmatically via JavaScript. This will not alter its initial rendering and therefore should not be done in code.

Next, bind a custom slideRight event and invoke it on hover as follows:

$(function() {

    // Bind a custom slideRight event to each image
    $('img.img_rightArrow').bind({
        slideRight: function () {
            $(this).stop(true, true).animate({"left": "+=50px"}, "fast");
        },
        slideLeft: function () {
            $(this).stop(true, true).animate({"left": "-=50px"}, "fast");
        }
    });

    $('a.a_projectLoad').hover(function () {
        // Traverse DOM to find nearby arrow image
        $(this).closest("tr").find("img.img_rightArrow").trigger("slideRight");
    }, function () {
        $(this).closest("tr").find("img.img_rightArrow").trigger("slideLeft");
    });

});

FYI: your images are missing the img_rightArrow class in the sample markup.

You could probably use a second functional parameter to .hover() to bind to the mouseout event. Check out the documentation for more information. I assume in your example it might be something of the sort of a trigger to a slideLeft event. Just a thought however.

edited Mar 10, 2011 at 19:51

answered Mar 8, 2011 at 9:38

lsuarez

4,9921 gold badge31 silver badges51 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

webwrks Over a year ago

Thanks! works great...now I'm just wondering when if at all you would ever use $('.a_projectLoad').each(function(evt){ $(this).hover(function(){ callback: slideRight; }); });

lsuarez Over a year ago

@webwrks You should check out the documentation for .each() as I don't think you quite got the gist of what it does. Given a set of elements from a selector, it passes two parameters to the function you provide it: the index of the element, and the element itself (which is also available within the function's context as "this"). You would normally use it to pass each element off to a function that performs a behavior not already shorthanded by jQuery.

webwrks Over a year ago

#lthibodwaux...

$(function() {     $('img.img_rightArrow').bind("slideRight", function () {         $(this).addClass('moveClass').animate({"left": "+=50px"}, "fast");     }); 	 	$('img.img_rightArrow').bind("slideLeft", function () {         $(this).addClass('moveClass').animate({"left": "-=50px"}, "fast");     });      $('a.a_projectLoad').hover(function () {         $(this).closest("tr").find("img.img_rightArrow").trigger("slideRight");     }, function () {         $(this).closest("tr").find("img.img_rightArrow").trigger("slideLeft")     });  });

works great but it fires animations, one()?

lsuarez Over a year ago

@webwrks I'm sorry, but could you restate the question? And to bind a second event, just use the return from the first bind so you don't reselect everything. jQuery works by using functional call chaining and always returning the jQuery object at the end of each call, i.e.: $('img.img_rightArrow').bind("slideRight", function () {}).bind("slideLeft", function() {}). You can also pass in a mapping object to .bind(), i.e.: $('img.img_rightArrow').bind({slideRight: function () {}, slideLeft: function() {}}) I'll add some edits to demonstrate.

webwrks Over a year ago

I trying to place the .stop() correctly to prevent buildup. Thanks for the great advice!

Gowri · Accepted Answer · 2011-03-08 09:39:19Z

0

Are you looking for this ?

$('.a_projectLoad').each(function(evt){
        $(this).hover(slideRight);
    });

function slideRight () {

    $('.img_rightArrow')
        .addClass('moveClass')
        .animate({"left": "+=50px"}, "fast");
}


});

It works me

answered Mar 8, 2011 at 9:39

Gowri

16.9k27 gold badges103 silver badges162 bronze badges

Collectives™ on Stack Overflow

jQuery create function and call it on each separately

2 Answers 2

5 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

5 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related