[英]Insert a descendant img element's src attribute into parent element's href attribute
我有以下html:
<a href="#">
<img src="img-1" />
</a>
<a href="#">
<img src="img-2" />
</a>
<a href="#">
<img src="img-3" />
</a>
我想要做的是为每个需要检索其子img src并将该src分别插入href的链接。
因此,最终结果将如下所示:
<a href="img-1">
<img src="img-1" />
</a>
<a href="img-2">
<img src="img-2" />
</a>
<a href="img-3">
<img src="img-3" />
</a>
谢谢。
遍历具有img
后代的每个a
元素,并获取相应的src
属性:
$('a:has(img)').each(function () {
this.href = $(this).find('img').attr('src');
});
另外,您也可以不使用jQuery:
var anchors = document.querySelectorAll('a');
Array.prototype.forEach.call(anchors, function (a) {
var img = a.querySelector('img');
a.href = img !== null ? a.querySelector('img').getAttribute('src') : a.href;
});
JavaScript解决方案:(我喜欢本机解决方案😉)
var images = document.getElementsByTagName("img") for(var i = 0; i < images.length; ++i) { if(images[i].parentElement && images[i].parentElement.tagName === "A") images[i].parentElement.href = images[i].src }
<a href="#"> <img src="img-1" /> </a> <a href="#"> <img src="img-2" /> </a> <a href="#"> <img src="img-3" /> </a>
它将获取文档中的所有图像元素,然后将其src应用于其parent href属性
JavaScript的
var all_images=document.getElementsByTagName('img')
for(var i=0;i<all_images.length;++i){
all_images[i].parentNode.href=all_images[i].src;
console.log(all_images[i].parentNode.href)
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.