Question

I have the following structure below. Using jQuery I need to take each link and display the href below it. I can use some child selectors to write code for each but I simply want to write something that does it for all div’s with the ‘col’ class, and will allow for future additions…

<div class="col">
    <a href="http://google.com">Google</a>
</div>

<div class="col">
    <a href="http://yahoo.com">Yahoo!</a>
</div>

<div class="col">
    <a href="http://facebook.com">Facebook</a>
</div>

<div class="col">
    <a href="http://twitter.com">Twitter</a>
</div>

The above should turn into…

<div class="col">
    <a href="http://google.com">Google</a>
    <span>http://google.com</span>
</div>

<div class="col">
    <a href="http://yahoo.com">Yahoo!</a>
    <span>http://yahoo.com</span>
</div>

<div class="col">
    <a href="http://facebook.com">Facebook</a>
    <span>http://facebook.com</span>
</div>

<div class="col">
    <a href="http://twitter.com">Twitter</a>
    <span>http://twitter.com</span>
</div>

Any help is appreciated!

Answer 1

This smacks of you not having tried to write the code at all. You should really be able to do this on your own.

$('.col a').each(function() {
    var $this = $(this);
    $("<span>"+$this.attr('href')+"</span>").insertAfter($this);
});