jQuery ближайший div с определенным классом/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(). Поскольку метод 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); 
    } 
}); 

Answer 2

попытка ниже

еще одна вещь, которую я вижу, что вы поставили класс 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>