Take the 2-minute tour ×

Is it possible to define multiple variables with a single jQuery chain?

var sectionTable = jQuery("#sectionsTable")
var sectionTableRows = sectionTable.find("tr");
var sectionTableColumns = sectionTableRows.find("td");

I don't know what the syntax would be if it is possible but if you took the 3 variables above how could you chain them and would it be considered good practice?

Many thanks


EDIT:: Wow - thanks for all the comments. Sorry for being vague, what I was after was a better way if one exists of defining child variables from a parent. Thats why I thought of using the chain and wondered if a away existed. Thanks for the great advice.

share|improve this question
add comment

5 Answers

up vote 3 down vote accepted

If you really want to, anything is possible :

Of the top of my head, you could try to do something like this :

var sectionTable,
    sectionTableColumns = $('td', (sectionTableRows = $('tr',(sectionTable = $('#sectionsTable')))));

Another ideea would be to build a mini-plugin that assigns the current jquery object to a certain field of an object :

jQuery.fn.assignTo = function(variableName,namespace){
    var ns = namespace || window;
    ns[variableName] = this;
    return this;

With this peace of code you could do the following :

var sections = {};


Of course, if you do not specify any namespace, the variables will be global (will be attached to the window object);

Any way, I do not encourage you to use these examples, because it doesn't make very much sense to worsen your code's readability in favour of fewer equal signs and var declarations.

share|improve this answer
Thanks for the response. This is basically what I meant, but I suppose what I was after were opinions on whether or not I was defining those 3 variables correctly or if there was a better way. –  Chris Nov 16 '11 at 11:22
@Chris In that case, your way is very good. The code is readable and you define variables based on previous ones, thus making your code more efficient (it's like a sort of miniature caching). –  gion_13 Nov 16 '11 at 11:25
Excellent thanks. I'm just learning and thought it an important thing to ask. Thanks to everyone for their advice. –  Chris Nov 16 '11 at 11:28
add comment

You could rewrite it as follows:

var $sectionTable = $('#sectionsTable'),
    $sectionTableRows = $('tr', $sectionTable),
    $sectionTableColumns = $('td', $sectionTableRows);

But of course, that’s only useful if you’re actually gonna use all three of those variables.

share|improve this answer
Would this be a better way to the one I used as my example? –  Chris Nov 16 '11 at 11:23
@Chris The only real difference (other than the “single” var declaration) is that this example uses less function calls (only three) because it avoids .find() and uses context instead. This makes it slightly more efficient. –  Mathias Bynens Nov 16 '11 at 11:41
add comment

I maybe don't really understand what you want or need, but you can chain any function for a jQuery wrapped set and "end" it and therefor "go back" to the previous set. For instance:

jQuery("#sectionsTable").css('background-color', 'red')
.find('tr').css('background-color', 'yellow')
.find('td').css('background-color', 'black')
.end() // back to 'tr'
.end() // back to '#sectionsTable'

However, this would imply that you only need to access those elements once. If you need to access them later in your code, you always should store the results references in variables for several performance reasons.

share|improve this answer
add comment

Why would you want to?

What's wrong with defining the three variables?

(No, you can't).

If you didn't need the sectionTable or sectionTableRows variables at all, you could of course do;

var sectionTableColumns = jQuery("#sectionsTable").find("tr").find("td");

Which, using the descendant selector, could be shortened to just;

var sectionTableColumns = jQuery("#sectionsTable tr td");
share|improve this answer
It is possible, see @Mathias Bynens post –  steven.yang Nov 16 '11 at 10:55
@steven.yang: That isn't a single chain, as asked for in the OP. –  Matt Nov 16 '11 at 10:56
@steven I think the OP was quite unclear about what he means. This seems like a very useful answer to me, not worth a downvote. Mathias's answer is good as well, depending on the meaning of "chaining". –  kapa Nov 16 '11 at 11:00
Just looking for the best way to define children from the parent. –  Chris Nov 16 '11 at 11:23
add comment

The only thing comes to my mind is one-var declaration, like:

var sectionTable = jQuery("#sectionsTable"), 
sectionTableRows = sectionTable.find("tr"), 
sectionTableColumns = sectionTableRows.find("td");
share|improve this answer
add comment

Your Answer


