title: jquery double function each
body: <p>I have the following block of HTML code more than once</p>
  
  <pre><code>&lt;div id="page_1" class="page"&gt;
  &lt;div class="imageDetail_bg"&gt;
      &lt;img src="../_img/detail_car.jpg" alt="" id="car_detail" class="car_detail"/&gt;
  &lt;/div&gt;&lt;!-- imageDetail--&gt;
  
      &lt;div id="listThumbs"&gt;
       &lt;div id="thumbsContainer_1" class="thumbsContainer"&gt;
          &lt;div id="areaThumb" class="areaThumb"&gt;
          &lt;div id="posThumb_1" class="posThumb"&gt;
              &lt;img src="../_img/detail_car.jpg" class="detail_img" alt=""&gt;
          &lt;/div&gt;
          &lt;/div&gt;&lt;!--areaThumb--&gt;
  
          &lt;div id="areaThumb" class="areaThumb"&gt;
          &lt;div id="posThumb_2" class="posThumb"&gt;
               &lt;img src="../_img/detail_car.jpg" class="detail_img" alt="" /&gt;
          &lt;/div&gt;
          &lt;/div&gt;&lt;!--areaThumb--&gt; 
              ...
              ...
              ...
  &lt;/div&gt;&lt;!--listThumbs--&gt;
   &lt;/div&gt;&lt;!--page--&gt;
  </code></pre>
  
  <p>and the following jQuery code:</p>
  
  <pre><code> $('.page').each(function(i) {
          $('.areaThumb').each(function(j) {
              $('.detail_img').eq(j).click(function(){
                  $('.car_detail').eq(i).attr('src', $(this).attr('src'));
              });
          });
  });
  </code></pre>
  
  <p>What I want to do is: For each page there's a block of thumbs, and when I click in any thumb, the image in #car_detail is replaced by the image of the thumb I clicked. At this moment I can do this, BUT the #car_detail image is replaced in all pages. I'm not getting individually actions for each page. Every click make the action occurs in all pages.</p>
  
  <p>Can anyone tell me what I'm doing wrong?
  Thanks</p>