遍歷DOM樹jquery

Question

我似乎無法找出一個相當簡單的遍歷...

基本上，如果有人單擊<li>並且我想在第一格中更改圖像，我該怎么做？ 嘗試了一些事情，包括：

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

小提琴

嘗試找到父.imageSlider元素，然后找到其子.currentImage元素。

$('.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);
});

另一個選擇是$(this).parent('ul').siblings('.currentImage').find('img') 。

Answer 2

該選擇器並不完全正確。 .currentImage是當前元素的父元素（即.thumbnails ）的同級元素，因此.thumbnails closest()永遠找不到它。