jQuery 与特定类/id 最接近的 div

Question

我需要你的帮助。
这段代码对我来说很好用：

<div class="grauereihe">
    <div class="kleinesbild">
        <a data-lightbox="ags1" class="bildtopa" href="images/image1.jpg">
            <img class="bildtop" src="images/produkte/KHF/KHF-DN40-03-2.jpg" />
        </a>
    </div>
    <div class="infozeile">
        <div class="produkttext">
            <img class="kleinegalerie" src="images/image2.jpg" />
            <img class="kleinegalerie" src="images/image3.jpg" />
        </div>
    </div>
</div>


<script>
$('.produkttext img').on({
    'mouseover': function() {
        var images = $(this).attr('src');
        $('.bildtop').attr('src', images);
        $('.bildtopa').attr('href', images);
    }
});
</script>

但我需要此代码用于多个 .grauereihe，例如：

<div class="grauereihe">
    <div class="kleinesbild">
        <a data-lightbox="lb1" class="bildtopa" href="images/image1.jpg">
            <img class="bildtop" src="images/image1.jpg" />
        </a>
    </div>
    <div class="infozeile">
        <div class="produkttext">
            <img class="kleinegalerie" src="images/image2.jpg" />
            <img class="kleinegalerie" src="images/image3.jpg" />
        </div>
    </div>
</div>

<div class="grauereihe2">
    <div class="kleinesbild">
        <a data-lightbox="lb1" class="bildtopa" href="images/image1.jpg">
            <img class="bildtop" src="images/image1.jpg" />
        </a>
    </div>
    <div class="infozeile">
        <div class="produkttext">
            <img class="kleinegalerie" src="images/image2.jpg" />
            <img class="kleinegalerie" src="images/image3.jpg" />
        </div>
    </div>
</div>

所以我想用最接近的函数（或父函数）替换srcand href，但我无法让它工作。喜欢：

<script>
$('.produkttext img').on({
    'mouseover': function() {
        var images = $(this).attr('src');
        $(this).closest('img').find('.bildtop').attr('src', images);
        $(this).closest('a').find('.bildtopa').attr('href', images);
    }
});
</script>

谁能帮我吗？谢谢

Answer 1

要获得第一个祖先，可以使用closest()方法。由于该closest()方法为您提供了最近的祖先元素，而您要查找的元素不是祖先元素，因此您可以遍历到最近的父元素，然后使用该find()方法获取后代元素。

$('.produkttext img').on({
    'mouseover': function(){
        var images = $(this).attr('src');
        $(this).closest('.grauereihe').find('img.bildtop').attr('src', images);
        $(this).closest('.grauereihe').find('a.bildtopa').attr('href', images);
    }
});