插入後裔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) 
}