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

Chris

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 variable. That's why I thought of using the chain and wondered if a way existed. Thanks for the great advice.

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

Chris

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 variable. That's why I thought of using the chain and wondered if a way existed. Thanks for the great advice.

• javascript
• jquery

5 Answers 5

If you really want to, anything is possible :

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

var sectionTable,
    sectionTableRows, 
    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 = {};
jQuery("#sectionsTable")
    .assignTo('sectionTable',sections)
    .find("tr")
        .assignTo('sectionTableRows',sections)
        .find("td")
            .assignTo('sectionTableColumns',sections);

console.log(sections.sectionTable);
console.log(sections.sectionTableRows);
console.log(sections.sectionTableColumns);

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.

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'
.doSomething()
.end() // back to '#sectionsTable'
.doSomething();

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.

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.

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

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

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