How to get link from an element and add to all elements of parent element using JavaScript

hamid :

I have many divs with a class and every div contains diferent elements including a link. what I want is to get the link and add it to all Elments of parent div such as img, headline etc. (using JavaScript) Ex:

.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>

mplungjan :

This is the fastest

Note I use function where I want to get at this or $(this)

$(function() { // on page load
  $(".ecs-event").on("click", function() { // click any ecs-event container
    location = $(this).find("a[rel=bookmark]").attr("href"); // find the bookmark
  })
});

.myClass {
  background-color: red;
  display: inline-block;
  width: 150px;
  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">
  <div class="ecs-event maerz_ecs_category">
    <div class="date_thumb">
      <div class="month">Mar</div>
      <div class="day">6</div>
    </div>
    <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>
    <div class="summary"><a href="https://dev.musikzentrum-hannover.de/veranstaltung/hannover-schulparty-2/" rel="bookmark">Hannover Schulparty – abgesagt!</a></div>
    <div class="ecs-button"><a href="https://dev.musikzentrum-hannover.de/veranstaltung/hannover-schulparty-2/" rel="bookmark">Mehr erfahren</a></div>
  </div>
  <div class="ecs-event maerz_ecs_category">
    <div class="date_thumb">
      <div class="month">Mar</div>
      <div class="day">7</div>
    </div>
    <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>
    <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>
    <div class="ecs-button"><a href="https://dev.musikzentrum-hannover.de/veranstaltung/eno-und-sero-el-mero-2/" rel="bookmark">Mehr erfahren</a></div>
  </div>
</div>

Plain JS

window.addEventListener("load", () => { // on page load
  [...document.querySelectorAll(".ecs-event")].forEach(div => { // find all ecs-event
    div.addEventListener("click", function(e) { // add a click handler
      location = this.querySelector("a[rel=bookmark]").getAttribute("href"); // find the bookmark
    })
  })
});

.myClass {
  background-color: red;
  display: inline-block;
  width: 150px;
  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">
  <div class="ecs-event maerz_ecs_category">
    <div class="date_thumb">
      <div class="month">Mar</div>
      <div class="day">6</div>
    </div>
    <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>
    <div class="summary"><a href="https://dev.musikzentrum-hannover.de/veranstaltung/hannover-schulparty-2/" rel="bookmark">Hannover Schulparty – abgesagt!</a></div>
    <div class="ecs-button"><a href="https://dev.musikzentrum-hannover.de/veranstaltung/hannover-schulparty-2/" rel="bookmark">Mehr erfahren</a></div>
  </div>
  <div class="ecs-event maerz_ecs_category">
    <div class="date_thumb">
      <div class="month">Mar</div>
      <div class="day">7</div>
    </div>
    <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>
    <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>
    <div class="ecs-button"><a href="https://dev.musikzentrum-hannover.de/veranstaltung/eno-und-sero-el-mero-2/" rel="bookmark">Mehr erfahren</a></div>
  </div>
</div>