jQuery Loop through each div

Question

I'm pretty sure this will be a really easy answer for you jQuery whizzes, and I'm also pretty such it involves a loop of some kind.

I'm trying to perform essentially the same calculation on two separate divs, but assigning a different CSS width value to each id based on the number of images found. The calculations I'm performing are irrelevant to my problem really, but I put them in anyway because it's the actual code I'm working with.

Here is the markup...

<div id ='test1' class='target'>
  <div class='scrolling'>
    <img/>
    <img/>
    <img/>
  </div>
</div>

<div id ='test2' class='target'>
  <div class='scrolling'>
    <img/>
    <img/>
    <img/>
  </div>
</div>

Below is my current jQuery, which works fine, but it's inefficient because I have to write another chunk of code for every div added. How can I standardise this so that it runs through every div with the class of target? Thanks

/* Measure the width of each image. */
test1 = $('#div1 .scrolling img').width();
test2 = $('#div2 .scrolling img').width();

/* Find out how many images there are. */
test1img = $('#div1 .scrolling img').length;
test2img = $('#div2 .scrolling img').length;

/* Do the maths. */
final1 = (test1 * test1img)*1.2;
final2 = (test2 * test2img)*1.2;

/* Apply the maths to the CSS. */
$('#div1 .scrolling').width(final1);
$('#div2 .scrolling').width(final2);

I´m not sure you need to do this calculations. Have you tried to solve it with pure CSS? — Stefan
– Stefan, Commented Jan 2, 2012 at 13:58

Niels · Accepted Answer · 2012-01-02 14:08:42Z

58

Like this:

$(".target").each(function(){
    var images = $(this).find(".scrolling img");
    var width = images.width();
    var imgLength = images.length;
    $(this).find(".scrolling").width( width * imgLength * 1.2 );
});

The $(this) refers to the current .target which will be looped through. Within this .target I'm looking for the .scrolling img and get the width. And then keep on going...

Images with different widths

If you want to calculate the width of all images (when they have different widths) you can do it like this:

// Get the total width of a collection.
$.fn.getTotalWidth = function(){
    var width = 0;
    this.each(function(){
        width += $(this).width();
    });
    return width;
}

$(".target").each(function(){
    var images = $(this).find(".scrolling img");
    var width = images.getTotalWidth();
    $(this).find(".scrolling").width( width * 1.2 );
});

edited Jan 2, 2012 at 14:08

answered Jan 2, 2012 at 13:54

Niels

50.1k4 gold badges68 silver badges86 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

Stefan Over a year ago

$(this).find(".scrolling img") returns a collection of matched elements.

Niels Over a year ago

True, but the starter sayd his code works, and I currently only added the loop, so should be still working. So jQuery will just pick the first IMG it can find and returns that width.

David Thomas Over a year ago

@Stefan, yes it does. But width() only returns the width of the first element from the array of matched elements.

Stefan Over a year ago

Ok, just saying that nothing says that all images have the same width but maybe they do.

SparrwHawk Over a year ago

Wow, loads of great responses here. Niel, your solution worked really well, but I'm interested in David's comment - perhaps this was an error with my original code too. What if I have images of different sizes within the .scrolling div? How can I make sure it calculates the total width? Tx

|

David Thomas · Accepted Answer · 2012-01-02 13:54:36Z

1

You're right that it involves a loop, but this is, at least, made simple by use of the each() method:

$('.target').each(
    function(){
        // iterate through each of the `.target` elements, and do stuff in here
        // `this` and `$(this)` refer to the current `.target` element
        var images = $(this).find('img'),
            imageWidth = images.width(); // returns the width of the _first_ image
            numImages = images.length;
        $(this).css('width', (imageWidth*numImages));

    });

References:

answered Jan 2, 2012 at 13:54

David Thomas

254k53 gold badges382 silver badges421 bronze badges

Comments

Jules · Accepted Answer · 2012-01-02 13:56:10Z

1

$('div.target').each(function() {
   /* Measure the width of each image. */
   var test = $(this).find('.scrolling img').width();

   /* Find out how many images there are. */
   var testimg = $(this).find('.scrolling img').length;

   /* Do the maths. */
   var final = (test* testimg)*1.2;

   /* Apply the maths to the CSS. */
   $(this).find('scrolling').width(final); 
});

Here you loop through all your div's with class target and you do the calculations. Within this loop you can simply use $(this) to indicate the currently selected <div> tag.

answered Jan 2, 2012 at 13:56

Jules

7,2236 gold badges28 silver badges51 bronze badges

Comments

sascha · Accepted Answer · 2012-01-02 13:55:06Z

0

What about .each()?

http://api.jquery.com/each/

answered Jan 2, 2012 at 13:55

sascha

4,7003 gold badges38 silver badges56 bronze badges

Comments

abuduba · Accepted Answer · 2012-01-02 14:13:51Z

0

Just as we refer to scrolling class

$( ".scrolling" ).each( function(){
    var img = $( "img", this );
    $(this).width( img.width() * img.length * 1.2 ) 
})

answered Jan 2, 2012 at 14:13

abuduba

5,0637 gold badges29 silver badges43 bronze badges

Collectives™ on Stack Overflow

jQuery Loop through each div

5 Answers 5

6 Comments

Comments

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

6 Comments

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related