Passing Array to jQuery Selector

Question

I believe it's possible to pass an array of DOM objects to jQuery's selector so you can manipulate multiple objects at the same time. I've tried doing this as follows but can't get it to work for some reason...

$(Sel).animate({
        backgroundColor: "#FF0000"
    }, 250, 'linear', function() {

        $(this).animate({
            backgroundColor: "#FFFFFF"
        }, 250, 'linear');

    });

Is it actually possible to do this or am I barking up the wrong tree?

I've put together this jsFiddle to test things out. The aim is to make a booking system where slots of half hour are selected so I need to manipulate "this" and the cell below on the next row.

Any advice greatly appreciated.

Code from fiddle:

function HighlightCells() {

    $('table#Calendar tbody tr td:not(".TimeCell")').live('mouseenter', function() {
        var Sel = new Array();
        Sel[1] = $(this);

        // Count number of previous TDs. Resut is base 0
        var NumIn = $(this).prevAll('td').length;

        // Increment count to compensate for nth-child being base 1
        NumIn++;

        var NextRow = $(this).closest('tr').next('tr');

        Sel[2] = $(NextRow).children("td:nth-child(" + NumIn + ")");

        // Animate the cell background colour red to white
        $(Sel).animate({
            backgroundColor: "#FF0000"
        }, 250, 'linear', function() {

            $(this).animate({
                backgroundColor: "#FFFFFF"
            }, 250, 'linear');

        });


        $('table#Calendar tbody td').live('mouseleave', function() {
            $(this).text("");
        });

    });

}

HighlightCells();

According to the documentation, it is possible: "jQuery (elementArray) : An array containing a set of DOM elements to wrap in a jQuery object." What is Sel? edit: nvm, didn't have a look at the fiddle. — Felix Kling
– Felix Kling, Commented Aug 13, 2012 at 15:41

gen_Eric · Accepted Answer · 2012-08-13 15:49:25Z

3

You are making a jQuery object from an array of jQuery objects. You can't do that, it doesn't work.

You need to either make Sel an array of DOM elements (note: arrays are zero-indexed, so Sel[1] is actually the 2nd element, but when building arrays, use .push unless you really need to use the actual keys):

var Sel = [];  // this is preferred over `new Array()`
Sel.push($(this).get(0)); // or Sel.push(this)
// ...
Sel.push($(NextRow).children("td:nth-child(" + NumIn + ")").get(0));

Or make Sel a jQuery object to begin with, and then add elements into it.

var Sel = $();
Sel = Sel.add(this);
// ...
Sel = Sel.add($(NextRow).children("td:nth-child(" + NumIn + ")"));
// ...
Sel.animate({ // sel is already a jQuery object, so we don't need `$(Sel)`

answered Aug 13, 2012 at 15:49

gen_Eric

228k42 gold badges304 silver badges343 bronze badges

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

Comments

user400654 · Accepted Answer · 2012-08-13 15:41:19Z

2

You are using an array of jQuery objects. Instead, you need an array of DOM objects.

var Sel = new Array();
        Sel[1] = this;

and

Sel[2] = $(NextRow).children("td:nth-child(" + NumIn + ")").get();

though, shouldn't that be Sel[0] = this and Sel[1] = ...?

answered Aug 13, 2012 at 15:41

user400654

95.1k16 gold badges168 silver badges188 bronze badges

3 Comments

gen_Eric Over a year ago

Don't you mean var Sel = new Array;?

user400654 Over a year ago

Yes, that's a typo in the fiddle.

Esailija Over a year ago

@Rocket Don't you mean var Sel = ["why is this sparse", this] :P

wirey00 · Accepted Answer · 2012-08-13 15:49:53Z

1

You can do this

var Sel = new Array();
Sel[1] = this;

and

Sel[2] = NextRow.children("td:nth-child(" + NumIn + ")")[0]; 
//  retrieves the DOM element  
// Also no need to wrap NextRow with $() since it's already a jQuery object

http://jsfiddle.net/wirey00/AX3C8/27/

answered Aug 13, 2012 at 15:49

wirey00

33.7k7 gold badges56 silver badges65 bronze badges

Collectives™ on Stack Overflow

Passing Array to jQuery Selector

3 Answers 3

Comments

3 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related