CODEWITHSUNDEEP
javascriptjquery
Chris Spittles
Chris Spittles

Reputation: 15359

jQuery: Define multiple variables with a single chain?

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.

Upvotes: 5

Views: 14574

Answers (5)

gion_13
gion_13

Reputation: 41533

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.

Upvotes: 7

jAndy
jAndy

Reputation: 236092

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.

Upvotes: 5

Mathias Bynens
Mathias Bynens

Reputation: 149704

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.

Upvotes: 4

Saeed Neamati
Saeed Neamati

Reputation: 35842

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

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

Upvotes: 1

Matt
Matt

Reputation: 75327

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

Upvotes: 0

Related Questions