获取链接href并将其应用于另一个jQuery链接

Question

I have a set of DIVs, each contains an image with an empty anchor tag wrapped around it

<a href="#"> Image is here </a>

I then have a 'Continue reading' link just before the div closes

<a href="?p=453">Continue reading <span class="meta-nav">→</span></a>

Is there a way with jQuery that when the page loads, I can that the href location of the continue reading button and apply that the empty anchor wrapped around my image?

Demo: http://jsfiddle.net/2hu66/1/

Answer 1

$('.card-prod').each(function() {
    var cr = $(this).find('a:last');
    $(this).find('.cardclick').attr('href', cr.attr('href'));
});

example Fiddle: http://jsfiddle.net/2hu66/4/

Answer 2

It is possible, but it is not a good idea. Links created with js are not visible for google crawers. The right way of doing this is creating a real link instead of "#".

Do the things right not interesting ;).

Answer 3

based on your HTML, you can do this:

​$(function(){
    $('.card-prod').each(function(){                         //for each item
        var theLink = $('a[href^="?p"]',this).attr('href');  //get the link
        $('a.cardclick',this).attr({'href':theLink});        //set to img link
    });
})​​

Answer 4

You can loop through the "continue reading" links and copy their href, perhaps like this:

​$(​"div.card-prod a:contains('Continue reading')")​​​​​​​​​​​​​​​​​​​​​​​​​​.each(function() {
    var $this = $(this);
    $this.closest("div.card-prod")
         .find("a.cardclick")
         .attr("href", $this.attr("href"));
});​

Updated Demo: http://jsfiddle.net/2hu66/3/

The :contains selector that I used above is not going to be the most efficient way to do it, but it works. If it were my html I'd probably give those "continue reading" anchor elements a common class and select on that. Or you could select the "meta-nav" spans and then take their parent. (Lots of options, really.)