to attach an event to each element of an array

Question

I have made several icon, and on their mouse hover they should do something. Now, I have made an array of my Icons, but as I apply each() to the set, it does not work:

So i need the following block of code to attach a hover event to each element of the set.

var icon_set = new Array('.icon-online', '.icon-save', '.icon-sms',
    '.icon-access', '.icon-support');
icon_set.each(function () {
    $(this).mouseleave(function () {
        img.stop().fadeOut();
    });
});

Answer 1

Try Array.join()

var icon_set = new Array('.icon-online', '.icon-save', '.icon-sms',
    '.icon-access', '.icon-support');
$(icon_set.join()).mouseleave(function () {
    img.stop().fadeOut();
});

---

icon_set.each(function () { --> .each() doesn't work with array

Use jQuery.each() , array.forEach(callback[, thisArg]) for array.

Answer 2

icon_set is a raw JavaScript Array. It doesn't have an each method. Use Array.prototype.forEach or $.each and wrap each array element with $();

icon_set.forEach(function (el) {
    $(el).mouseleave(function () {
        $(this).stop().fadeOut();
    });
});

or

$.each(icon_set, function(index, el) {
  $(el).mouseleave(function () {
    $(this).stop().fadeOut();
  });
});

And prefer using the array literal syntax([]) over the Array constructor

['.icon-online', '.icon-save', 
 '.icon-sms','.icon-access', '.icon-support'].forEach(yourMouseleaveHandler);