更新图片链接创建代码：编写jQuery为img标签包裹链接

针对你想给每个.car-image容器里的图片包裹跳转链接的需求，我整理了一段实用的jQuery代码，还考虑了避免重复包裹的细节，一起来看看：

你的HTML结构回顾 #

<div class="car-item gray-bg text-center first" style="height: 357px;"> 
  <div class="car-image"> 
    <img class="img-responsive" src="http:///wp-content/uploads/2018/03/20180214_090633-265x190.jpg" alt="" width="265" height="190"> 
    <div class="car-overlay-banner"> 
      <!-- 这里是你的覆盖层内容 -->
    </div>
  </div>
</div>

推荐的jQuery代码 #

// 等待DOM完全加载后执行
$(document).ready(function() {
  // 遍历所有.car-image下的img标签
  $('.car-image img').each(function() {
    // 判断当前图片是否已经被a标签包裹，防止重复操作
    if (!$(this).parent().is('a')) {
      // 替换成你实际需要的跳转链接，也可以动态获取
      var targetLink = '你的目标跳转地址'; 
      // 为图片包裹a标签
      $(this).wrap('<a href="' + targetLink + '" target="_blank"></a>');
    }
  });
});

灵活调整提示 #

如果你的跳转链接需要动态获取（比如存在图片的自定义属性里），可以修改targetLink的赋值逻辑，举个例子：

// 假设图片带有data-link属性存储跳转地址
var targetLink = $(this).data('link');

内容的提问来源于stack exchange，提问作者whole3