DOM manipulation: Replacing href value with src value of child image
I have the following html markup:
<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>
I want to manuipulate the DOM so that the src value of each image replaces the href value of the parent link element, so that the markup becomes:
<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>
Why ever would I want to do this, you ask? I'm pulling images into a page using the Flickr API, but then wish to use the jQuery ColorBox plugin for a gallery开发者_JAVA技巧 effect...and for that I believe I need to render the Flickr-generated markup as above.
Thanks in advance
Andrew
$('.photoset a > img').each(function() {
this.parentNode.href = this.src;
});
This iterates over images that are a child of <a>
and are contained in .photoset
, and sets the href
property of its parentNode
to the value of its src
.
Like this:
$('a:has(img)').attr('href', function() {
return $(this).find('img').attr('href');
});
精彩评论