Why this type of array wrapping does not work in jQuery?

Question

Consider this:

var i=$('<img src="/path/to/imgI.png"/>');
var j=$('<img src="/path/to/imgJ.png"/>');
$([i,j]).css('cursor','hand');

The cursor is not changed however and I don't know why..

When I do it separately, it works.

Thanks.

Answer 1

Are you sure your problems isn't browser specific? That particular css property is tricky, it requires the property be set two different ways to work in IE and Firefox.

I'd recommend using a class in the img tag to specify the hand property. Then you can specify both rules and get what you are looking for.

Answer 2

The array is of two jQuery objects when what you require is the DOM elements within those jQuery objects. This will work:

var i=$('<img src="/path/to/imgI.png"/>')[0]; // <= Notice [0]
var j=$('<img src="/path/to/imgJ.png"/>')[0];
$([i,j]).css('cursor','pointer');

Alternatively, (using add())

var i=$('<img src="/path/to/imgI.png"/>');
var j=$('<img src="/path/to/imgJ.png"/>');
$(i).add(j).css('cursor','pointer');

EDIT: Also, use cursor:pointer; instead of cursor:hand;

Answer 3

Would make more sense to put selectors in the array:

var i = $('<img src="/path/to/imgI.png"/>').attr('id','i');
var j = $('<img src="/path/to/imgJ.png"/>').attr('id','j');
$( ['#i', '#j'] ).css('cursor','hand');

Answer 4

The correct cursor property is "pointer" not "hand", which is an IE only extension no longer required for anything but IE 5.5 and lower - i.e. very rarely.

Answer 5

You can use jQuery method to turn the jQuery object into a true array and then merge them.

var i=$('<img src="/path/to/imgI.png"/>');
var j=$('<img src="/path/to/imgJ.png"/>');
i = $.makeArray(i);
j = $.makeArray(j);
$( $.merge(i,j) ).css('cursor','pointer');

Btw that also works when you need to add multiple jQuery selection together,

i = $.makeArray( $('div') );
j = $.makeArray( $('a') );
$( $.merge(i,j) ); //this Jqeury object holds all divs and a's

You could offcourse also do that like this:

$('div').add('a');