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      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    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

User · Accepted Answer

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

User · Answer

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    css    each    find

User · Answer

What about  each     http   api jquery com each

User · Answer

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  lt div gt  tag

User · Answer

Just as we refer to scrolling class       scrolling    each  function        var img       img   this          this  width  img width     img length   1 2

[jquery] jQuery Loop through each div

Examples related to jquery

Examples related to loops