时间戳

首页 > 解决方案 > 如何使用 jQuery 遍历 div、抓取 href 和包装不同的元素？

javascript - 如何使用 jQuery 遍历 div、抓取 href 和包装不同的元素？

问题描述

我对 jQuery 很陌生，到目前为止只能进行基本的 CSS 编辑。我无权访问源代码，但我需要使用类“.card”遍历每个 div，获取超链接的 href 并将链接应用于每个相应的图像，以便用户可以单击图像以除了文字。

我尝试了以下方法，但产生了意想不到的后果：

$(function() {
    $(".card-img").each(function() { // For each card
        var a = $(this).next('a'); // Find its associated anchor
        $(".card-img").wrap('<a href="' + a.attr('href') + '"></a>'); // And wrap the card image
    });
});

谁能告诉我如何做到这一点？

<div class="g-c g-c--md4">
  <div class="card ">
    <div class="card-img">
      <img src="webinar-1.png">
    </div>
    <div class="card-content">
      <div class="card-copy">
        <p>Webinar 1</p>
      </div>
      <a class="cta card-cta" href="https://www.webinar1url.com">Watch Webinar</a>
    </div>
  </div>
</div>


<div class="g-c g-c--md4">
  <div class="card ">
    <div class="card-img">
      <img src="webinar-2.png">
    </div>
    <div class="card-content">
      <div class="card-copy">
        <p>Webinar 2</p>
      </div>
      <a class="cta card-cta" href="https://www.webinar2url.com">Watch Webinar</a>
    </div>
  </div>
</div>


<div class="g-c g-c--md4">
  <div class="card ">
    <div class="card-img">
      <img src="webinar-3.png">
    </div>
    <div class="card-content">
      <div class="card-copy">
        <p>Webinar 3</p>
      </div>
      <a class="cta card-cta" href="https://www.webinar3url.com">Watch Webinar</a>
    </div>
  </div>
</div>



<div class="g-c g-c--md4">
  <div class="card ">
    <div class="card-img">
      <img src="webinar-4.png">
    </div>
    <div class="card-content">
      <div class="card-copy">
        <p>Webinar 4</p>
      </div>
      <a class="cta card-cta" href="https://www.webinar4url.com">Watch Webinar</a>
    </div>
  </div>
</div>

标签： javascriptjquery

解决方案

使用循环遍历每个.carddiv .each()，然后使用$(this)引用卡片 div。在循环.find()中，既可以抓取href也可以.wrap()用 包裹图像href：

$('.card').each(function() {
  var href = $(this).find('a').attr('href');
  $(this).find('img').wrap(`<a href="${href}"></a>`)
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="g-c g-c--md4">
  <div class="card ">
    <div class="card-img">
      <img src="webinar-1.png">
    </div>
    <div class="card-content">
      <div class="card-copy">
        <p>Webinar 1</p>
      </div>
      <a class="cta card-cta" href="https://www.webinar1url.com">Watch Webinar</a>
    </div>
  </div>
</div>


<div class="g-c g-c--md4">
  <div class="card ">
    <div class="card-img">
      <img src="webinar-2.png">
    </div>
    <div class="card-content">
      <div class="card-copy">
        <p>Webinar 2</p>
      </div>
      <a class="cta card-cta" href="https://www.webinar2url.com">Watch Webinar</a>
    </div>
  </div>
</div>


<div class="g-c g-c--md4">
  <div class="card ">
    <div class="card-img">
      <img src="webinar-3.png">
    </div>
    <div class="card-content">
      <div class="card-copy">
        <p>Webinar 3</p>
      </div>
      <a class="cta card-cta" href="https://www.webinar3url.com">Watch Webinar</a>
    </div>
  </div>
</div>



<div class="g-c g-c--md4">
  <div class="card ">
    <div class="card-img">
      <img src="webinar-4.png">
    </div>
    <div class="card-content">
      <div class="card-copy">
        <p>Webinar 4</p>
      </div>
      <a class="cta card-cta" href="https://www.webinar4url.com">Watch Webinar</a>
    </div>
  </div>
</div>

推荐阅读