Question

I usually create variables for frequently reused DOM elements like this:

var $dom_element = $('#dom_element);

where this is my setup:

<div id="dom_element">
  <div class="child_element">
  <div class="child_element">
</div>

what I’m wondering is if I can mix this variable with a subselector to get child elements. I guess it would be something like this:

var $child_element = $($dom_element + ' .child_element);

And if so, is there any speed benefit to doing this versus just saying:

$('.child_element);

considering the fact that both of these elements might be deeply nested in a large site?

Answer 1

With

var $dom_element = $('#dom_element);

I would use the following to get the child elements

var $child_element = $dom_element.find(".child_element");//I prefer this one, it is easier to read.

or

var $child_element = $(".child_element", $dom_element);

From my research/reading, it appears that setting an element to a variable is best if you are going to reference it many times. That way jQuery does not have to search the DOM many times.