selector show element and context. Cannot get the element

Question

Maybe this is a very stupid question, but not stupid enough for me since I can't seem to figure this out (even with Google).

I have this jquery:

$.each(items, function (key, t) {
  $("#list").append(
    $("<li />")
     .append($("<img />")
       .attr("src", "path/to/" + t.Thumbnail)
       .addClass("thumb"))
       .append($("<span />")
         .html("<b>" + t.Title + "</b><br />" + t.Description)));
});

After this I loop through the thumbs to do some styling (with size and ratio, not relevant here)

$(".thumb").each(function () {
  console.log($(this));
});

In the console I see this:

[img.thumb, context: img.thumb, jquery: "1.9.0", constructor: function, init: function,     
selector: ""…]
0: img.thumb
context: img.thumb
length: 1
__proto__: Object[0]

What is this context? With $(this).width() it gives an error or 0. When I have an image that is already on the page it just...works?!

So, the problem is: Why doesn't this work and why does it work on other pages?

Thanks in advance

EDIT: Added an example to Fiddle: http://jsfiddle.net/nN9ce/

When you use a selector `$('.thumb')` it traverses the entire `DOM` to find the particular selector.. But if you pass in a context it will only try to find that element in that particular `context` .. So if you write the same selector as `$('.thumb', 'table')` it will only try to find the elements within the `table` elements and not the entire `DOM` — Sushanth --, Jun 17 '13 at 18:34
@Sushanth ... Tried that... Didn't work. When you do $(".thumb").width() it gives 0... when this should be 240 pixels. Same with your example/suggestion — , Jun 17 '13 at 18:44
It looks like you're trying to read the width before the image has finished loading. When I run it the first time I get zero, but if I reload I get 128 since it pulls it from the cache. — j08691, Jun 17 '13 at 18:47

score 3 · Accepted Answer · answered Jun 17 '13 at 18:50

3

.width() gets the size of the element, and not the image itself. When the script runs, although the images have been added to the dom, they aren't loaded yet so the elements have a width of 0 (even if the images you are about to load into those elements are of width 128).

You need to run a callback after the images are loaded.

answered Jun 17 '13 at 18:50

Djave

8,595
8
70
124

Makes sense... Somehow :) I'll try that – Jun 17 '13 at 18:53
This may or may not be useful! http://stackoverflow.com/questions/3877027/jquery-callback-on-image-load-even-when-the-image-is-cached – Djave Jun 17 '13 at 18:55
1

Hero! :) I've updated Fiddle: http://jsfiddle.net/nN9ce/3/ It's finaly working! Well... Was very easy, stupid to miss this. Thanks! – Jun 17 '13 at 18:58
Yeah you should always remember that JQuery only works with DOM tree. – ducnh Jun 17 '13 at 19:24

score 0 · Answer 2 · answered Jun 17 '13 at 18:52

0

You haven't set the width and height attributes on the images. Try making this change:

.attr("src", "http://www.logoquizantwoorden.nl/wp-content/uploads/2012/06/Logo-Quiz-uitleg.png")
.attr("height", "128")
.attr("width", "128")
.addClass("thumb")

Fiddle: http://jsfiddle.net/sBSnS/

answered Jun 17 '13 at 18:52

Skrivener

1,003
6
11

1

That's whole point: Get the actual size of the image, not a defined size. I need to play with the size, but keep the ratio – Jun 17 '13 at 18:54

score -1 · Answer 3 · answered Jun 17 '13 at 18:47

-1

Not sure about the method problem but you can use the property

width

So, you'd have this.

$(".thumb").each(function () {
    console.log(this.width);
});

answered Jun 17 '13 at 18:47

asafreedman

572
4
10

score -1 · Answer 4 · answered Jun 17 '13 at 18:55

-1

Try this instead:

$(".thumb").each(function (idx, thumb) {
  console.log($(thumb)); 
   console.log($(thumb).width());
});

Here is updated fiddle:

http://jsfiddle.net/nN9ce/2/

answered Jun 17 '13 at 18:55

bang

4,982
1
24
28

You're making the same mistake a few others have made. Clear your cache and run your fiddle. You get zero the first time and a value the times after that because the images are coming from the cache. – j08691 Jun 17 '13 at 18:57
Cache was not the bad guy... This time. See the answer I selected. I needed to wait on the image to load – Jun 17 '13 at 18:59
Totally true ! Sorry... Read the question AND the code badly... blaming bad sleep the latest two nights :) ... – bang Jun 17 '13 at 19:06
LOL no problem... Same here, that's why I had this problem :) – Jun 18 '13 at 06:02

selector show element and context. Cannot get the element

4 Answers4