Question

Here’s a test run in Firebug. I’m trying to make a jQuery object dynamically, and then finding parts of it using class or id selectors. Notice how the find() calls give empty results.

>>> var testhtml = '<div class="oggi">h</div>'
undefined
>>> $(testhtml)
[div.oggi]
>>> $(testhtml).find(".oggi")
[]
>>> var testhtml2 = '<div id="yggi">hjhj</div>'
undefined
>>> $(testhtml2)
[div#yggi]
>>> $(testhtml2).find("#yggi")
[]

Should I interpret this as you are unable to do some jQuery operations on html that isn’t connected to the main DOM tree in the browser? Is there some other trick that I might use to make this work?

I managed to get something that worked better by making a temporary div in the html, loading the data there and then doing find().

My actual task is loading a piece of html using ajax, and then copying different parts of it to different places in the web page.

Answer 1

.find() is used to find the children, use .filter() instead.

var testhtml = '<div class="oggi">h</div>';

// if you want to check it whether has a class, use    
console.log($(testhtml).is(".oggi"));

// or you could use filter to get the element you want.
console.log($(testhtml).filter('.oggi'));