我有很多帶有一個類的 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>
1 回答
不負相思意
TA貢獻1777條經驗 獲得超10個贊
這是最快的
注意我使用function我想要到達的地方this或$(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>
普通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>
- 1 回答
- 0 關注
- 139 瀏覽
添加回答
舉報
0/150
提交
取消