javascript - Divs with Same Class Name: Select First Child and Set Different CSS Styles for Each -

i'm creating slideshow , use js set position of controls. that, height , width of first image make calculation.

html:

<div class="slideshow">           <figure class="image">             <img src="images/or-staff.jpg" />             <figcaption>insert caption</figcaption>           </figure>           <figure class="image">             <img src="images/patient-phone.jpg" />             <figcaption>insert caption</figcaption>           </figure>            <figure class="image">             <img src="images/labor-nurse.jpg" />             <figcaption>this example of long caption. here go. wrap second line? wrap wrap wrap wrap. wrap wrap wrap wrap wrap wrap wrap wrap wrap wrap wrap</figcaption>           </figure>         </div> 

js:

  var imageheight = $(".slideshow img").first().height();   var imagewidth = $(".slideshow img").first().width(); 

based on calculation, add css slideshow div position controls.

however, if have more 1 slideshow on page, both class of "slideshow", image width , height taken first image in first slideshow.

how cycle through slideshows, image height , width of first image each, , set position of controls separately each?

i tried doing height of each, returned null:

$(".slideshow").each(function() {     var imageheight = $(this).find('.slideshow-inner:first-child').outerheight();     console.log(imageheight);     }); 

you can iterate through "slideshow" containers:

$(".slideshow").each(function() {   var container = this;   var imageheight = $(container).find("img").first().height();   var imagewidth = $(container).find("img").first().width();   // ... stuff ... }); 

inside .each() callback, this container dom element.