title: jQuery Loop through each div
body: <p>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.</p>
  
  <p>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.</p>
  
  <p>Here is the markup...</p>
  
  <pre><code>&lt;div id ='test1' class='target'&gt;
    &lt;div class='scrolling'&gt;
      &lt;img/&gt;
      &lt;img/&gt;
      &lt;img/&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  
  &lt;div id ='test2' class='target'&gt;
    &lt;div class='scrolling'&gt;
      &lt;img/&gt;
      &lt;img/&gt;
      &lt;img/&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>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</p>
  
  <pre><code>/* 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);    
  </code></pre>