jQuery selector returns prevObject instead of normal element

Question

I have some problems with selecting elements, with Jquery. When i try to select a element:

var images = $("#htmlChunk").find("img.Thumb"); console.log(images); 

i get this result:

>[<img>, <img>, prevObject: e.fn.e.init[1], context: #document, selector: "#htmlChunk img.Thumb"] 

What is causing this returned result? I tried some things but still dont get the result i wanted.

i tried to wrap the code to avoid conflict's. i tried to clear the object

This was something i found on the web. http://drupal.org/node/272557

var images = $("#htmlChunk")['prevObject'].find("img.Thumb"); 

i get returned a object now, but thats also not what i wanted.

I jumped into this project so i am not well-known with the script. i tried to search for prevObject in the js files but could'nt find any.

I think the problem is that it is interfering with some other javascript file. any ideas? directions?

Edit: htmlChunk:

<div id="htmlChunk">     <div class="ngg-albumoverview">         <div class="ngg-album-compact">             <div class="ngg-album-compactbox">                 <div class="ngg-album-link">                     <a class="Link" href="http://........">                         <img class="Thumb" alt="Personeelsevent" src="http://.........">                     </a>                 </div>             </div>             <h4><a class="ngg-album-desc" title="Personeelsevent" href="http://.....">Personeelsevent</a></h4>             <p><a href="http:///.......">bekijk dit album</a></p>         </div>     </div> </div> 

Answer 1

Your images variable is a jQuery object, so what you're seeing output in your browser's console seems to be that object. The specific output suggests that the call to .find() isn't actually matching any elements; compare the two console outputs from this jsFiddle (in Chrome).

When you call a jQuery function - such as .find(), .filter(), etc - that narrows down, or changes, the list of matched elements on an existing jQuery object the resulting jQuery object also contains a reference to the state before that function was run, which is what you're seeing as prevObject. This is what it uses to revert back to when you call the .end() function.

Let's break down your code:

var images = $(".htmlChunk").find("img.Thumb"); 

The first part - $(".htmlChunk") - matches all elements that have the class htmlChunk on them, and returns a jQuery object containing those elements.

Then you call .find("img.Thumb") which looks for all elements that are descendents of the already matched elements (those with the class htmlChunk) that satisfy the criteria of being an <img> element and having the class Thumb on them.

You could use a single selector to retrieve the elements, which might give you better results:

var images = $(".htmlChunk img.Thumb"); 

If you want an array of the actual DOM elements, rather than a jQuery object containing them, you can use the .get() function:

var elementArray = images.get(); 

---

To address the edit to the question to include the HTML:

You're using $(".htmlChunk") to obtain the initial element. However, that <div> element has an ID, not a class, of htmlChunk so that code won't select the element you need. You'll want to use the following:

var images = $("#htmlChunk").find("img.Thumb"); 

Note the # rather than the . in the selector.

Answer 2

It looks like your trying to select class ".htmlChunk", but does not exist. Try selecting by id instead.

var images = $("#htmlChunk").find("img.Thumb");