JQuery: Define multiple variables with one chain?

Question

Is it possible to define multiple variables with the same jQuery chain?

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

I don’t know what syntax would be if it were possible, but if you took 3 variables above, how could you bind them and consider this a good practice?

Thank you very much

Chris

EDIT: Wow, thanks for all the comments. Sorry for the nebula, what I was was the best way (if any) to define child variables from a parent variable. That's why I thought about using chaining and wondered if there was a way. Thanks for the great advice.

Answer 1

If you really want this, anything is possible:

At the top of your head, you can try to do something like this:

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

Another idea would be to create a mini plugin that assigns the current jquery object to a specific object field:

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

With this calm code, you can 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 (they will be bound to the window object);

In any case, I do not recommend you to use these examples, because it does not make much sense to impair code readability in favor of smaller equal signs and var declarations.

Answer 2

Perhaps I don’t quite understand what you want or want, but you can link any function to a set of completed jQuery and "finish" it and, therefore, "return" 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 means that you only need to access these elements once . If you need to access them later in your code, you should always store references to results in variables for several reasons.

Answer 3

You can rewrite it as follows:

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

But of course, this is only useful when you really use all three of these variables.

Answer 4

The only thing, in my opinion, is the declaration of one-var , for example:

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

Answer 5

Why do you need it?

What is wrong with the definition of three variables?

(No, you cannot).

---

If you don't need the sectionTable or sectionTableRows , you could certainly do:

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

Which, using the descendant selector , could be reduced to:

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