Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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.

like image 668
Chris Spittles Avatar asked Dec 04 '22 19:12

Chris Spittles


2 Answers

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.

like image 181
gion_13 Avatar answered Dec 30 '22 13:12

gion_13


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.

like image 24
jAndy Avatar answered Dec 30 '22 12:12

jAndy