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();

Answer 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/