时间戳

首页 > 解决方案 > img src 等于父 div 的兄弟 img src

jquery - img src 等于父 div 的兄弟 img src

问题描述

.thumb-img的src应该等于最接近.slider-img的src

$(function imgsrc() {
  var thumbimg = $('.thumb-img')
    .closest('div')
    .prev()
    .attr('src');
  $('.thumb-img').attr('src', thumbimg)
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div>
  <img class="slider-img" data-u="image" src="https://cdn-images-1.medium.com/max/1200/1*H-25KB7EbSHjv70HXrdl6w.png" />
  <div data-u="thumb">
    <img class="thumb-img" data-u="thumb" src="" />
    <div class="ti">Slide Description</div>
  </div>
</div>

标签： jquery

解决方案

我认为你有多个这样的 img 标签，在这种情况下它不会像你预期的那样工作，因为变量thumbimg总是第一个 img 标签值。

因为$('.thumb-img').closest('div').prev()将是 img 标记的集合，并且.attr('src')始终返回集合中的属性第一个元素。

根据文档：

获取匹配元素集中第一个元素的属性值，或为每个匹配元素设置一个或多个属性。

为了解决这个问题，您必须遍历元素，然后对每个元素单独执行相同的操作。所以使用each()方法来实现这一点。

$(function imgsrc() {
  $('.thumb-img').each(function() {
    $(this).attr('src', $(this).closest('div')
      .prev()
      .attr('src'));
  })
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div>
  <img class="slider-img" data-u="image" src="https://cdn-images-1.medium.com/max/1200/1*H-25KB7EbSHjv70HXrdl6w.png" />
  <div data-u="thumb">
    <img class="thumb-img" data-u="thumb" src="" />
    <div class="ti">Slide Description</div>
  </div>
</div>

或者您可以使用attr()带有回调（内部迭代）作为第二个参数的方法，在回调中获取src父兄弟元素的属性（this指当前元素）。

$(function imgsrc() {
  $('.thumb-img').attr('src', function() {
    return $(this).closest('div')
      .prev()
      .attr('src');
  })
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div>
  <img class="slider-img" data-u="image" src="https://cdn-images-1.medium.com/max/1200/1*H-25KB7EbSHjv70HXrdl6w.png" />
  <div data-u="thumb">
    <img class="thumb-img" data-u="thumb" src="" />
    <div class="ti">Slide Description</div>
  </div>
</div>

更新：我刚刚检查了你的网站（如评论），结构完全不同，所以你必须改变一些东西。获取包含带有slider-img类的 img 标签的祖先 div，然后获取 img 标签及其 src 属性值。

$(function imgsrc() {
  $('.thumb-img').attr('src', function() {
    return $(this).closest('div:has(.slider-img)')
      .find('.slider-img')
      .attr('src');
  })
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div>
  <img class="slider-img" data-u="image" src="https://cdn-images-1.medium.com/max/1200/1*H-25KB7EbSHjv70HXrdl6w.png" />
  <div data-u="thumb">
    <img class="thumb-img" data-u="thumb" src="" />
    <div class="ti">Slide Description</div>
  </div>
</div>

推荐阅读