jQuery find does not seem to work

Question

Hi

I have a DocumentFragment stored in "selectedContents", and I am trying to find "span" elements in it, with the help of jQuery. It has two child nodes, where the first one is a text node, and the second one a span.

When I try $(selectedContents.childNodes).find('span'), it returns an empty set!

However, when I print the "$(selectedContents.childNodes)[1].localName" it says "span"!

Is there anything wrong in my find? Please help.

Thanks
Srikanth

Answer 1

Because you're passing a collection of elements, you need to use .filter() to filter the <span> out of the set.

$(selectedContents.childNodes).filter('span');

• http://api.jquery.com/filter/

The .find() method is used to search for descendants.

---

EDIT: Note that your approach of passing the childNodes into the jQuery object is correct. You can't pass a documentFragment as some suggest.

Here's an example to illustrate: http://jsfiddle.net/P8nur/

Answer 2

Try just

$(selectedContents).find('span');

Answer 3

With $(selectedContents.childNodes) you already selected all elements from the selectedContents. So doing a find would execute the method on the first element of that selector.

Try this one:

$(selectedContents).find('span')

Answer 4

The thing here is $(selectedContents) return a jQuery magic thing while $(selectedContents.childNodes) return something like an ugly array. So, no find() function for your array.

Use $(selectedContents).find('span') or $(selectedContents.childNodes).filter('span'), as @justkt and @patrick dw said.

Answer 5

I tried $(selectedContents).find('span'), but it resulted an empty set! As well as the filter, which too resulted empty set!

However $(selectedContents).children('span') resulted what I wanted!

Like patrick_dw said, probably jQuery does not work as expected with DocumentFragment!

Thanks all, for your help.