How to use jQuery mouseover from an array?

Question

I have a sample code:

<a href=""></a>
<textarea></textarea>
<object></object>
<img src="" />
<div id="content"></div>

I had using this:

jQuery("a").mouseover(function() {
    alert();
 });
 jQuery("textarea").mouseover(function() {
    alert();
 });
 jQuery("object").mouseover(function() {
    alert();
 }); 
 jQuery("img").mouseover(function() {
    alert();
 });
 jQuery("#content").mouseover(function() {
    alert();
 });

Can I using this ?

var object = ["a","textarea","object","img", "content"]; 
jQuery.each(object, function() {
   jQuery(this).mouseover(function(){
      alert();
   });  
});

How to ideas using jQuery mouseover from an array ?

What exactly do you want to be doing with this code?

Xymostech
– Xymostech

2012-11-24 03:47:20 +00:00
Commented Nov 24, 2012 at 3:47 — Xymostech
– Xymostech, Commented Nov 24, 2012 at 3:47

nnnnnn · Accepted Answer · 2012-11-24 04:00:23Z

In the context of your .each() loop, this will be the current element from the array, i.e., a string, except that each string will be wrapped in an object (as explained at the $.each() doco page), so you need to use this.toString():

jQuery(this.toString()).mouseover(function(){

...and then it will have the same effect as jQuery("a"), jQuery("textarea") and so forth. Which will work as long as each string is a valid selector. Or, better, make use of the arguments that jQuery passes to your function:

jQuery.each(object, function(i, val) {
   jQuery(val).mouseover(function(){

The final element in your array is an id, so it needs a #:

var object = ["a","textarea","object","img", "#content"];
// add # here --------------------------------^

Then in the context of the mouseover handler, this is the element that the event occurred on, so just use jQuery(this) rather than jQuery("#" + this). Putting that all together:

jQuery.each(object, function(i, val) {
   jQuery(val).mouseover(function(){
       jQuery(this).css(...);           
   });  
});

Demo: http://jsfiddle.net/GBtFY/

loganfsmyth · Accepted Answer · 2012-11-24 03:49:03Z

1

When you access this you don't prepend #.

As for the array, I would just use a CSS selector:

$('a, textarea, object, img, #content').mouseover(function(){
  $(this).css(...);
});

answered Nov 24, 2012 at 3:49

loganfsmyth

162k31 gold badges349 silver badges259 bronze badges

1 Comment

loganfsmyth Over a year ago

If you are going to downvote, please comment saying why. I'm happy to edit my answer if it has an issue.

Akhil Sekharan · Accepted Answer · 2012-11-24 04:02:53Z

0

If I were you I would give a common attribute to those elements which needs the mouse over function. like a classname or a data-value attribute.
For example:

<a href="" data-hover="true"></a>
<textarea data-hover="true" ></textarea>
<object data-hover="true" ></object>
<img data-hover="true" src="" />
<div data-hover="true" id="content"></div>


<script type="text/javascript">
$(document).ready(function(){
    $('[data-hover]').bind('mouseover', function(){
        alert('Completed');
    });
});
</script>

answered Nov 24, 2012 at 4:02

Akhil Sekharan

12.7k8 gold badges43 silver badges58 bronze badges

Collectives™ on Stack Overflow

How to use jQuery mouseover from an array?

3 Answers 3

Comments

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related