Question

我有以下html标记：

<div class='photoset'>  
<a href="foo-01.html"><img src="foo-01.jpg" /></a>  
<a href="foo-02.html"><img src="foo-02.jpg" /></a>  
<a href="foo-03.html"><img src="foo-03.jpg" /></a>  
<a href="foo-04.html"><img src="foo-04.jpg" /></a>  
</div>

我想操作DOM，以便每个图像的src值替换父链接元素的href值，以便标记变为：

<div class='photoset'>  
<a href="foo-01.jpg"><img src="foo-01.jpg" /></a>  
<a href="foo-02.jpg"><img src="foo-02.jpg" /></a>  
<a href="foo-03.jpg"><img src="foo-03.jpg" /></a>  
<a href="foo-04.jpg"><img src="foo-04.jpg" /></a>  
etc...
</div>

为什么我要这样做，你问？我正在使用Flickr API将图像拖入页面，但随后希望使用jQuery ColorBox插件进行图库效果...为此我相信我需要渲染Flickr生成的标记，如上所述。

提前致谢

安德鲁

Answer 1

$('.photoset a > img').each(function() {
    this.parentNode.href = this.src;
});

这会迭代<a>的子项并包含在.photoset中的图像，并将href的{{1}}属性设置为其parentNode的值1}}。

Answer 2

像这样：

$('a:has(img)').attr('href', function() {
    return $(this).find('img').attr('href');
});

DOM操作：用子图像的src值替换href值

2 个答案: