jQuery 最接近 div 特定 class/id

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>

所以我想用最接近的函数（或父函数）替换 src 和 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() method. As the closest() method gives you the closest ancestor and the element you're looking for is not an ancestor, you can traverse to the closest parent element and then use 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);
    }
});

Answer 2

试试下面

还有一件事我可以看到你已经把 class grauereihe2 请转换为也 grauereihe 将您的代码放在文档中是一个很好的做法。

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

jQuery 最接近 div 特定 class/id

jQuery closest div with specific class/id

html

jquery

replace

closest