jQuery each() working weird

Question

I am trying to get the width of some nested image. I have the following HTML code:

<div class="slide" id="Slide1">
        <a href="#" title="Some Title" target="_blank">
             <img src="images/photo1.jpg" alt="Slide 1" class="slideImg">
        </a>
        <div class="caption" style="width: 476px">
            <h1>Stuff</h1>
            <p>Some Stuff Description</p>
        </div>
    </div>
<div class="slide" id="Slide2">
        <a href="#" title="Some Title" target="_blank">
             <img src="images/photo.jpg" alt="Slide 2" class="slideImg">
        </a>
        <div class="caption" style="width: 476px">
            <h1>Stuff</h1>
            <p>Some Stuff Description</p>
        </div>
    </div>

And working with jQuery, I want to get the width of each IMG so then I can set (1024px - that width) to the correct "CAPTION DIV" ( <div class="caption"> ). Both of this script, are giving me a second image whose width is "0", an impossible thing.

$('.slideImg').each(function(){
    alert($(this).width());             
 });
$('.slide').each(function(){
    alert($(this).attr('id'));
    alert($(this).find('a').find('img').width());
});

Thanks in advance!

Are you sure both images were loaded. Because the second image could of course have a zero width, if it was not loaded from the server. — feeela, Oct 09 '12 at 12:46
[Your code works fine in JSfiddle](http://jsfiddle.net/4hBWC/). You must have something else that's not included in the markup. — Paul Fleming, Oct 09 '12 at 12:47
ouch, I think I did not paste the Slider Code, sorry, I will edit that — Leandro Cusack, Oct 09 '12 at 12:49
It works fine here.. Maybe your Image was no loaded properly..http://jsfiddle.net/9wZ4P/1/ — Sushanth --, Oct 09 '12 at 12:50
Sorry, I am having problems with my proxy, I was trying to edit the question but I could not, I am using SlideJs, wwww.slidejs.com, and all this function, is used inside: slidesLoaded: function() {, I have tried to take it out from there, but it is the same, i do not know what is happening. — Leandro Cusack, Oct 09 '12 at 15:10

score 1 · Answer 1 · answered Oct 09 '12 at 12:50

1

I just checked its working fine.

   $(document).ready(function(){

      $('.slide').each(function(){
        alert($(this).attr('id'));
            alert($(this).find('a').find('img').width());
});

    });

answered Oct 09 '12 at 12:50

Devnegikec

631
5
11

Thsi is not working for me. I was trying to edit the question, because I have a Slide, that could be the hint. – Leandro Cusack Oct 09 '12 at 15:15

score 0 · Answer 2 · answered Oct 09 '12 at 12:51

0

So did I and it works for me.

Which browser are you using?

I tested in Chrome 22, IE 9, Firefox 15

answered Oct 09 '12 at 12:51

geedubb

4,048
4
27
38

score 0 · Answer 3 · answered Oct 09 '12 at 12:53

0

May be you can also check if your image is hidden. because jquery has problems in computing dimensions for hidden elements

answered Oct 09 '12 at 12:53

Rohini Kumar

249
1
5
15

Yes, the first slide is only visible, that could be the problem, because first loop is giving me the correct data, but the others are wrong. How could I deal with this 'hidden' bug? – Leandro Cusack Oct 09 '12 at 15:12
may be you can use "off-left technique" as described in the below link http://docs.jquery.com/UI/API/1.8/Tabs. just before calculating width apply the above technique and after the calculation remove the technique. so that it will not impact your layout – Rohini Kumar Oct 09 '12 at 15:16

score 0 · Answer 4 · edited May 23 '17 at 12:27

0

It may be that the images haven't fully loaded when your jQuery is running. See here: Official way to ask jQuery wait for all images to load before executing something

Also, clientWidth will give you the actual rendered width of the image

You might try:

$('.slide').load(function() {
  alert(this.clientWidth);
})

edited May 23 '17 at 12:27

Community

1
1

answered Oct 09 '12 at 13:00

Brian Glick

2,201
18
20

jQuery each() working weird

4 Answers4