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         


        

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

try this.

   function getId() {
             var ids = $(".htmlChunk").find("img.thumb"); //it wiill return array of image
             var sid = $(".htmlChunk").find("img#img2"); //it wiill return wat image you want
             $(".htmlChunk span").text("arrays:" + ids[0] + "  :  " + ids[1] +
             "simple imge:" + sid);
         }


    <input id="Button1" type="button" value="button" onclick= "getId();"/>


  <div class="htmlChunk">
        <img alt="" src="img/Desert.jpg" class="thumb" id="img1" />
       <img alt="" src="img/Chrysanthemum.jpg" class="thumb" id="img2" />
        <span></span>
   </div>

Answer 3

isn't prevObject just a property of the result?

you could understand it as "the result has the following prevObject ->"

Answer 4

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

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