CODEWITHSUNDEEP
jqueryperformancecss-selectorspagespeed
a clever name
a clever name

Reputation: 478

jQuery, how to use multiple cached elements

For my project I'm using cached selectors to speed up, and see improvements: (to reduce searches inside the document)

var sel1 = $('#selector1');
var sel2 = $('#selector2');

how can I use cached selectors in this situation? for ex:

$('#selector1, #selector2').fadeTo(300, 1, 'linear');

It's just to polish up my code

Ty :)

Upvotes: 14

Views: 2064

Answers (5)

Jasper
Jasper

Reputation: 76003

You can use .add() to "Add elements to the set of matched elements":

sel1.add(sel2).fadeTo(300, 1, 'linear');

Docs for .add(): http://api.jquery.com/add

.add() can take in:

  • a selector
  • DOM elements
  • jQuery objects
  • and selectors with context ($('<selector>', <context>))

You can also pass an array of DOM elements to jQuery:

var one = $('#one')[0],
    two = $('#two')[0];

$([one, two]).fadeTo(300, 1, 'linear');

Here is a demo: http://jsfiddle.net/3xJzE/

UPDATE

I created a jsperf of the three different methods that are currently answers: http://jsperf.com/jquery-fadeto-once-vs-twice (it seems like using an array selector is the fastest: $([one, two]).fadeTo...)

Upvotes: 17

Emre Erkan
Emre Erkan

Reputation: 8482

You can use .add() method for that;

sel1.add(sel2).fadeTo(300, 1, 'linear');

It'll be good if you add $ prefix when naming your variables. This way you can distinguish them from standart javascript objects. So this is better:

var $sel1 = $('#selector1');
var $sel2 = $('#selector2');

$sel1.add($sel2).fadeTo(300, 1, 'linear');

Upvotes: 7

ShankarSangoli
ShankarSangoli

Reputation: 69915

Try this

sel1.add(sel2).fadeTo(300, 1, 'linear');

Upvotes: 1

Dennis
Dennis

Reputation: 32598

jQuery's add

sel1.add(sel2).fadeTo(300, 1, 'linear');

Upvotes: 7

musefan
musefan

Reputation: 48425

If you already have the selectors stored just apply the fadeTo to each one individually. JQuery will just have to parse the selector anyway...

sel1.fadeTo(300, 1, 'linear');
sel2.fadeTo(300, 1, 'linear');

Upvotes: 1

Related Questions