How to get the child of a jQuery object stored in a variable

Question

To give a brief high-level, I have a search results page with custom nifty boxes for each result. I take a cloneNode(true) of the search results and store it in a jQuery object. I then want to affect the contents of its children by targeting by ID.

Assuming I have an HTML structure such as this:

<div id="parent">
  <div id="child-1">
  </div>
  <div id="child-2">
  </div>
</div>

And I take a clone of parent like so:

var templatePage = $('div#parent')[0].cloneNode(true);

Now I want to affect the CSS of #child-2 with something similar to:

templatePage.jQueryGetElementById('child-2').css("display", "none");

I can't use $('#child-2').css("display", "none"); because I need the div that is in the variable, not the page.

Surely there's just some little thing I'm missing but alas, Google is not being kind to me on this one.

Answer 1

$("#child-1", templatePage).css("display", "none");

You can see an example of this here. This works by passing a context (templatePage) to jQuery, and as templatePage contains a DOM element, #child-1 is looked for within that DOM element, rather than the document.