Question

 var $thingy = $('.thingy'),
     $window = $(window);

 $window.on('resize', function(){
       thingy.width($window.width()/12);
 });

Is it possible to add more .thingys to the page and have them resize without re-querying?

I am aware that the following will work:

 var $window = $(window);

 $window.on('resize', function(){
       $('.thingy').width($window.width()/12);
 });     

the problem is, I am not adding .thingys to the page very often, making the creation of new jQuery objects and rapid re-querying of the DOM seem like alot of overhead.

Is there a better way?

Answer 1

Whenever you add a new .thingy, update the selection with

$thingy = $('.thingy');

or

$thingy = $thingy.add(the_new_thingy)

Of course $thingy must be visible in both places.