CODEWITHSUNDEEP
javascriptjquery
seanuk
seanuk

Reputation: 33

jQuery - Copy a dynamic link from one element to another

The URL in div.alpha is dynamic. I need to take this URL and apply it to an 'a href' that wraps 'View Details' in div.beta

<div class="alpha">
    <a href="http://www.url.com">Example</a>
    Plus some other stuff which may contain links, etc
    that I don't want to copy to the other div.
</div>

<div class="beta">
    View Details
</div>

Desired result:

<div class="alpha">
    <a href="http://www.url.com">Example</a>
    Plus some other stuff which may contain links, etc
    that I don't want to copy to the other div.
</div>

<div class="beta">
    <a href="http://www.url.com">View Details</a>
</div>

I can get the link like this: $('.alpha').find('a').attr('href');

But I don't know how to pass that link to the XXXX below:

$('.beta').each(function(){
    $(this).text($(this).text().replace('View Details', '<a href="XXXX">View Details</a>'));
});

Upvotes: 3

Views: 4764

Answers (5)

Ashar Zafar
Ashar Zafar

Reputation: 402

jQuery - Copy a dynamic link from one element to another

CopyLink = jQuery('.page-id-269 ').find('a').clone().attr('href');
jQuery("#menu-item-387 a").attr("href", CopyLink);

Best solution 100% Work

Upvotes: 0

Prusprus
Prusprus

Reputation: 8065

var $betaAnchor = $('.alpha a').clone(); //clone anchor
var anchorLabel = $beta.text(); //grab text from beta tag
$('.beta').append($betaAnchor.text(anchorLabel)); //append cloned anchor with beta text

Upvotes: 0

PeterKA
PeterKA

Reputation: 24638

If you have several div.alpha and div.beta elements then the best way to achieve this -- it also works for a single pair -- is:

$('div.beta').html(function(i,html) {
    return $(this).prev('div.alpha').find('a').clone().html( html );
});


    $('div.beta').html(function(i,html) {
        return $(this).prev('div.alpha').find('a').clone().html( html );
    });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="pair">
  <div class="alpha">
    <a href="http://www.url.com">Example 1</a>
  </div>

  <div class="beta">
    View Details
  </div>
</div>

<div class="pair">
  <div class="alpha">
    <a href="http://www.example.com">Example 2</a>
  </div>

  <div class="beta">
    View Details
  </div>
</div>

Upvotes: 0

billyonecan
billyonecan

Reputation: 20260

You could clone a.alpha, then just wrap .b's contents with it:

// clone the link, remove the text
$link = $('.alpha').find('a').clone().text('');

// wrap all .beta's contents with the cloned link
$('.beta').contents().wrap($link);

Here's a fiddle

Upvotes: 2

Nikhil Aggarwal
Nikhil Aggarwal

Reputation: 28465

You can achieve the result by updating your code to following.

var href = $('.alpha').find('a').attr('href'); // get href of anchor
var text = $('.beta').text(); // get text of beta element i.e. View Details
var betaHTML = "<a href='" + href + "'>" + text + "</a>"; // Create anchor
$('.beta').html(betaHTML); // Update beta element

Upvotes: 2

Related Questions