如何使用 JavaScript 从元素获取链接并添加到父元素的所有元素

Question

我有很多带有一个类的 div，每个 div 都包含不同的元素，包括一个链接。我想要的是获取链接并将其添加到父 div 的所有元素中，例如 img、标题等（使用 JavaScript）例如：

.myClass{

  background-color:red;

  display:inline-block;

  width:150px;

  overflow:hidden;

}

<div class="myClass">

  <div></div>

  <div></div>

  <div><h1>test</h1></div>

  <div><img src="https://scx1.b-cdn.net/csz/news/800/2019/2-nature.jpg" alt="">

    <a href="#">Link1</a>

  </div>

</div>

<div class="myClass">

  <div></div>

  <div></div>

  <div><h1>test</h1></div>

  <div><img src="https://scx1.b-cdn.net/csz/news/800/2019/2-nature.jpg" alt="">

    <a href="#">Link2</a>

  </div>

</div>

Answer 1

这是最快的注意我使用function我想要到达的地方this或$(this)$(function() { // on page load&nbsp; $(".ecs-event").on("click", function() { // click any ecs-event container&nbsp; &nbsp; location = $(this).find("a[rel=bookmark]").attr("href"); // find the bookmark&nbsp; })});.myClass {&nbsp; background-color: red;&nbsp; display: inline-block;&nbsp; width: 150px;&nbsp; overflow: hidden;}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script><div class="ecs-events compact compact-1">&nbsp; <div class="ecs-event maerz_ecs_category">&nbsp; &nbsp; <div class="date_thumb">&nbsp; &nbsp; &nbsp; <div class="month">Mar</div>&nbsp; &nbsp; &nbsp; <div class="day">6</div>&nbsp; &nbsp; </div>&nbsp; &nbsp; <div class="ecs-thumbnail"><img width="75" height="75" src="https://dev.musikzentrum-hannover.de/wp-content/uploads/2019/12/01-03-hannover-schulparty-1-200x200.jpg" class="attachment-75x75 size-75x75 wp-post-image" alt=""></div>&nbsp; &nbsp; <div class="summary"><a href="https://dev.musikzentrum-hannover.de/veranstaltung/hannover-schulparty-2/" rel="bookmark">Hannover Schulparty – abgesagt!</a></div>&nbsp; &nbsp; <div class="ecs-button"><a href="https://dev.musikzentrum-hannover.de/veranstaltung/hannover-schulparty-2/" rel="bookmark">Mehr erfahren</a></div>&nbsp; </div>&nbsp; <div class="ecs-event maerz_ecs_category">&nbsp; &nbsp; <div class="date_thumb">&nbsp; &nbsp; &nbsp; <div class="month">Mar</div>&nbsp; &nbsp; &nbsp; <div class="day">7</div>&nbsp; &nbsp; </div>&nbsp; &nbsp; <div class="ecs-thumbnail"><img width="75" height="75" src="https://dev.musikzentrum-hannover.de/wp-content/uploads/2019/10/001-200x200.jpg" class="attachment-75x75 size-75x75 wp-post-image" alt=""></div>&nbsp; &nbsp; <div class="summary"><a href="https://dev.musikzentrum-hannover.de/veranstaltung/eno-und-sero-el-mero-2/" rel="bookmark">Eno und Sero el Mero – abgesagt</a></div>&nbsp; &nbsp; <div class="ecs-button"><a href="https://dev.musikzentrum-hannover.de/veranstaltung/eno-und-sero-el-mero-2/" rel="bookmark">Mehr erfahren</a></div>&nbsp; </div></div>普通JSwindow.addEventListener("load", () => { // on page load&nbsp; [...document.querySelectorAll(".ecs-event")].forEach(div => { // find all ecs-event&nbsp; &nbsp; div.addEventListener("click", function(e) { // add a click handler&nbsp; &nbsp; &nbsp; location = this.querySelector("a[rel=bookmark]").getAttribute("href"); // find the bookmark&nbsp; &nbsp; })&nbsp; })});.myClass {&nbsp; background-color: red;&nbsp; display: inline-block;&nbsp; width: 150px;&nbsp; overflow: hidden;}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script><div class="ecs-events compact compact-1">&nbsp; <div class="ecs-event maerz_ecs_category">&nbsp; &nbsp; <div class="date_thumb">&nbsp; &nbsp; &nbsp; <div class="month">Mar</div>&nbsp; &nbsp; &nbsp; <div class="day">6</div>&nbsp; &nbsp; </div>&nbsp; &nbsp; <div class="ecs-thumbnail"><img width="75" height="75" src="https://dev.musikzentrum-hannover.de/wp-content/uploads/2019/12/01-03-hannover-schulparty-1-200x200.jpg" class="attachment-75x75 size-75x75 wp-post-image" alt=""></div>&nbsp; &nbsp; <div class="summary"><a href="https://dev.musikzentrum-hannover.de/veranstaltung/hannover-schulparty-2/" rel="bookmark">Hannover Schulparty – abgesagt!</a></div>&nbsp; &nbsp; <div class="ecs-button"><a href="https://dev.musikzentrum-hannover.de/veranstaltung/hannover-schulparty-2/" rel="bookmark">Mehr erfahren</a></div>&nbsp; </div>&nbsp; <div class="ecs-event maerz_ecs_category">&nbsp; &nbsp; <div class="date_thumb">&nbsp; &nbsp; &nbsp; <div class="month">Mar</div>&nbsp; &nbsp; &nbsp; <div class="day">7</div>&nbsp; &nbsp; </div>&nbsp; &nbsp; <div class="ecs-thumbnail"><img width="75" height="75" src="https://dev.musikzentrum-hannover.de/wp-content/uploads/2019/10/001-200x200.jpg" class="attachment-75x75 size-75x75 wp-post-image" alt=""></div>&nbsp; &nbsp; <div class="summary"><a href="https://dev.musikzentrum-hannover.de/veranstaltung/eno-und-sero-el-mero-2/" rel="bookmark">Eno und Sero el Mero – abgesagt</a></div>&nbsp; &nbsp; <div class="ecs-button"><a href="https://dev.musikzentrum-hannover.de/veranstaltung/eno-und-sero-el-mero-2/" rel="bookmark">Mehr erfahren</a></div>&nbsp; </div></div>