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>
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.