插入后裔img元素的src属性到父元素的href属性

Question

我有以下的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> 

谢谢。

Answer 1

遍历每个有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; 
}); 

Answer 2

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它的父母href属性

Answer 3

的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) 
}