jQuery find does not seem to work

Question

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 o

Answer 1

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 2

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 3

Try just

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

Answer 4

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.

Answer 5

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/