jquery double function each

I have the following block of HTML code more than once

<div id="page_1" class="page">
<div class="imageDetail_bg">
    <img src="../_img/detail_car.jpg" alt="" id="car_detail" class="car_detail"/>
</div><!-- imageDetail-->

    <div id="listThumbs">
     <div id="thumbsContainer_1" class="thumbsContainer">
        <div id="areaThumb" class="areaThumb">
        <div id="posThumb_1" class="posThumb">
            <img src="../_img/detail_car.jpg" class="detail_img" alt="">
        </div>
        </div><!--areaThumb-->

        <div id="areaThumb" class="areaThumb">
        <div id="posThumb_2" class="posThumb">
             <img src="../_img/detail_car.jpg" class="detail_img" alt="" />
        </div>
        </div><!--areaThumb--> 
            ...
            ...
            ...
</div><!--listThumbs-->
 </div><!--page-->

and the following jQuery code:

 $('.page').each(function(i) {
        $('.areaThumb').each(function(j) {
            $('.detail_img').eq(j).click(function(){
     开发者_C百科           $('.car_detail').eq(i).attr('src', $(this).attr('src'));
            });
        });
});

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.

Can anyone tell me what I'm doing wrong? Thanks

You need not iterate through each element of the jquery selector result to bind a click event.
And you are missing a closing div for thumbsContainer div, add that before each .

Also if you have an element with id car_detail then you should use #car_detail instead of .car_detail

Working example @ http://jsfiddle.net/2ZQ6b/

Try this:

$(".page .areaThumb .detail_img").click(function(){
    $(this).closest("div.page").find('.car_detail').attr("src", this.src);
});

If the .detail_img elements are being used for the car_detail image then you can simplify the above code to:

$(".detail_img").click(function(){
    $(this).closest("div.page").find('.car_detail').attr("src", this.src);
});

You need to give context to your children nodes:

 $('.page').each(function(i) {
        $('.areaThumb', this).each(function(j) {
            $('.detail_img', this).eq(j).click(function(){
                $('.car_detail', this).eq(i).attr('src', $(this).attr('src'));
            });
        });
});

Every this is pointing to the current element given by the jquery function that called it.

[edit] Cybernate found a better way to do what you wanted to. My answer mostly explains why your code did not work as you wanted

I think you have the wrong approach about this,

You should just use cloning and you will be fine...

HTML

<div class="holder">Replace Me</div>
<div>
    <div class="car"><img src="img1" /></div>
    <div class="car"><img src="img2" /></div>
</div>

JS

$('.car').click(function(){//when you click the .car div or <img/>
    var get_car =   $(this).clone();//copy .car and clone it and it's children 
    $('.holder').html('').append(get_car);//put the clone to the holder div...
});

I think this is what you should be doing, simple and elegant... do not understand why you complicate as much :)