遍历DOM树jquery

Question

A fairly simple traversal that I can't seem to figure out...

Basically if someone clicks on the <li> and I want to change the image in the first div, how would I go about doing that? tried a few things including :

$(this).closest('.currentImage img')

<div class="imageSlider">
    <div class="currentImage">
        <img src="LP5/lp5_1.png"/>
    </div>
    <ul class="thumbnails">
        <li><img src="LP5/lp5_1.png"/></li>
        <li><img src="LP5/lp5_2.png"/></li>
        <li><img src="LP5/lp5_3.png"/></li>
        <li><img src="LP5/lp5_4.png"/></li>
        <li><img src="LP5/lp5_5.png"/></li>
    </ul>
</div>

Jquery

$('.thumbnails li').click(function(e){
    e.preventDefault();
    var newImage = $(this).children('img').attr('src');
    var $image = $(this).closest('.currentImage img');
    $image.fadeOut(500, function() {
        $image.attr('src', newImage);
    }).fadeIn(500);
 });

Answer 1

Fiddle

Try finding the parent .imageSlider element, and then finding its child .currentImage element.

$('.thumbnails li').click(function(e){
    e.preventDefault();
    var newImage = $(this).children('img').attr('src');
    var $image = $(this).parents('.imageSlider').find('.currentImage img');
    console.log(newImage);
    $image.fadeOut(500, function() {
        $image.attr('src', newImage);
    }).fadeIn(500);
});

Another option would be $(this).parent('ul').siblings('.currentImage').find('img') .

Answer 2

That selector isn't exactly right. .currentImage is a sibling of the current element's parent (ie .thumbnails ), so closest() will never find it.