将后代img元素的src属性插入父元素的href属性中

时间:2015-12-27 20:36:09

标签: javascript jquery html

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

谢谢。

3 个答案:

答案 0 :(得分:1)

迭代具有a个后代的每个img元素,并获取相应的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;
});

答案 1 :(得分:0)

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>

它将获取文档中的所有Image-Elements,然后将其src应用于它的parent href属性

答案 2 :(得分:0)

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