How to copy attibute href to another "a" element [JQUERY]

Question

I want to copy a href attribute on element h2.title a to element a.fb when I click a.share.

But, each one has one a.share.

If I click the first a.share, #LINK1 will copy to a.fb.

If I click the second a.share, #LINK2 will copy to a.fb too and remove existing value on attribute href at a.share.

Sorry for bad english :(

Thanks for help me

<div class='sharewpopup'>
  <a class='fb'>Share to Facebook</a>
</div>

<!--POST 1-->
<div class='post'>
  <h2 class='title'><a href='#LINK1'>POST TITLE 1</a></h2>
  <a class='share' href='#'>Share</a>
</div>

<!--POST 2-->
<div class='post'>
  <h2 class='title'><a href='#LINK2'>POST TITLE 2</a></h2>
  <a class='share' href='#'>Share</a>
</div>

Answer 1

You may not need jQuery for this. Plain JS will be enough.

If you use the html code you mentioned each a.share previousElementSibling will be its closest h2.title each time shareMe is invoked.

Inside it the a elem will be the one containing the href to copy.

  <div class='sharewpopup'>
    <a class='fb'>Share to Facebook</a>
  </div>

  <!--POST 1-->
  <div class='post'>
    <h2 class='title'><a href='#LINK1'>POST TITLE 1</a></h2>
    <a class='share' onclick="javascript:shareMe(this);" href='#'>Share</a>
  </div>

  <!--POST 2-->
  <div class='post'>
    <h2 class='title'><a href='#LINK2'>POST TITLE 2</a></h2>
    <a class='share' onclick="javascript:shareMe(this);" href='#'>Share</a>
  </div>

  <script>
    function shareMe(aElem) {
      var dest = aElem.previousElementSibling.querySelector('a').href;
      document.querySelector('.sharewpopup a').href = dest;
      return false;
    }
  </script>

Answer 2

I'd suggest:

// retrieving the the elements matching the 'a.share' CSS selector:
$('a.share')
  // using the on() method to bind the anonymous function as the
  // 'click' event-handler:
  .on('click', function(event) {
    // preventing the default behaviour of the clicked <a> element:
    event.preventDefault();

    // caching the clicked <a> element:
    let clicked = $(this);

    // retrieving the elements matching the supplied CSS selector,
    // this could be simplified depending on the presence of other
    // 'a.fb' elements that you wish, or don't wish, to affect with
    // the same functionality:
    $('div.sharewpopup a.fb')
      // here we update the 'href' attribute of the found element(s),
      // using the .attr() method:
      .attr('href',
        // we update it to the result of the next expression; here
        // find the closest (ancestor) '.post' element:
        clicked.closest('.post')
        // from there we find the descendant elements that match
        // the supplied 'h2 > a' CSS selector:
        .find('h2 > a')
        // and retrieve the 'href' attribute-value of the first
        // element in the returned correction, using the .attr()
        // method as the getter:
        .attr('href'));
});

$('a.share').on('click', function(event) {
  event.preventDefault();
  let clicked = $(this);
  $('div.sharewpopup a.fb').attr('href', clicked.closest('.post').find('h2 > a').attr('href'));
});

a.fb::after {
  content: ' (' attr(href) ')';
}

<script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>
<div class='sharewpopup'>
  <a class='fb'>Share to Facebook</a>
</div>

<!--POST 1-->
<div class='post'>
  <h2 class='title'><a href='#LINK1'>POST TITLE 1</a></h2>
  <a class='share' href='#'>Share</a>
</div>

<!--POST 2-->
<div class='post'>
  <h2 class='title'><a href='#LINK2'>POST TITLE 2</a></h2>
  <a class='share' href='#'>Share</a>
</div>

This could also be done quite easily with plain JavaScript:

// defining a named function to handle the copying of attribute,
// this takes one argument - an Event object, provided automagically
// by the EventTarget.addEventListener() method (later):
const hrefToShare = (event) => {

  // again, we prevent the default action of the clicked <a> element:
  event.preventDefault();

  // here we find, and cache, the first (if any) 'a.fb' element
  // that matches the supplied CSS selector:
  let shareLink = document.querySelector('div.sharewpopup a.fb'),

    // we cache the clicked <a> element, via the 'target'
    // property of the Event object:
    clicked = event.target,

    // here navigate from the clicked <a> to the
    toShare = clicked
      // closest (ancestor) element matching the '.post' CSS
      // selector:
      .closest('.post')
      // from that element we find the first descendant element
      // using Element.querySelector that matches the supplied
      // CSS selector:
      .querySelector('h2 > a');

  // then we update the href property (not the attribute) of the
  // shareLink element (the a.fb) to be equal to the href property
  // (not the attribute) of the toShare ('LINK1','LINK2') element:
  shareLink.href = toShare.href
}

// here we retrieve a nodeList of the elements that match the
// 'a.share' CSS selector:
let shareLinks = document.querySelectorAll('a.share');

// here we iterate over those found nodes, and use an Arrow function
// to add an event-listener to each in turn, supplying the named
// hrefToShare() function (note the deliberate lack of parentheses)
// as the event-handler for the 'click' event:
shareLinks.forEach(

  // the 'share' argument is a reference to the current Node
  // of the NodeList over which we're iterating:
  (share) => share.addEventListener('click', hrefToShare)
);

const hrefToShare = (event) => {
  event.preventDefault();
  let shareLink = document.querySelector('div.sharewpopup a.fb'),
    clicked = event.target,
    toShare = clicked
    .closest('.post')
    .querySelector('h2 > a');
  shareLink.href = toShare.getAttribute('href');
}

let shareLinks = document.querySelectorAll('a.share');

shareLinks.forEach(
  (share) => share.addEventListener('click', hrefToShare)
);

a.fb::after {
  content: ' (' attr(href) ')';
}

<div class='sharewpopup'>
  <a class='fb'>Share to Facebook</a>
</div>

<!--POST 1-->
<div class='post'>
  <h2 class='title'><a href='#LINK1'>POST TITLE 1</a></h2>
  <a class='share' href='#'>Share</a>
</div>

<!--POST 2-->
<div class='post'>
  <h2 class='title'><a href='#LINK2'>POST TITLE 2</a></h2>
  <a class='share' href='#'>Share</a>
</div>

Above I used the following line of JavaScript:

shareLink.href = toShare.href

this is to copy the href property of one <a> element to another, instead I could have used:

shareLink.setAttribute('href', toShare.getAttribute('href'));

or:

shareLink.setAttribute('href', toShare.href);

these two lines result in much the same thing, and will update the href attribute to be correct the former will copy the href attribute, and the second will copy the href property, from the toShare element. Either of these will result in a working link (provided the toShare link is functional and doesn't rely on subsequent JavaScript manipulation).

What will (potentially) not work is:

shareLink.href = toShare.getAttribute('href');

The reason is that the href attribute can be a relative URL that's parsed by the browser when the user attempts to follow the link, whereas the href property is an absolute URL (derived from the relative, root-relative or absolute URL found in the href attribute). So, the href property is, or should be, an absolute URL.

References:

• JavaScript:
  • Arrow functions.
  • document.querySelector().
  • EventTarget.addEventListener().
  • Event.preventDefault().
  • NodeList.prototype.forEach()
• jQuery:
  • attr().
  • closest().
  • event.preventDefault().
  • on().

Answer 3

Two ways

• use eq when you want to copy to first one user

$("a.share").eq(0).attr("href", $(h2.title a).eq(0).attr("href"))

and fir second one:

$("a.share").eq(1).attr("href", $(h2.title a).eq(1).attr("href"))

• or simply use prev since the .share and h2 are in same box:

$("a.share").attr("href", this.prev('h2').find("a").attr("href"))

this is when you bind click envent on the a.share

Answer 4

On click on share link, find the its .post wrapper, then find the h2 inside it, and now go to the link inside of h2. Now grab the href from that link and add it to the .fb link.

var $fbLink = $('.sharewpopup .fb');

$('.share').on('click', function(e) {
  e.preventDefault();
  var $linkToShare = $(this).closest('.post').find('.title a');
  $fbLink.attr('href', $linkToShare.attr('href'));
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>
<div class='sharewpopup'>
  <a class='fb'>Share to Facebook</a>
</div>

<!--POST 1-->
<div class='post'>
  <h2 class='title'><a href='#LINK1'>POST TITLE 1</a></h2>
  <a class='share' href='#'>Share</a>
</div>

<!--POST 2-->
<div class='post'>
  <h2 class='title'><a href='#LINK2'>POST TITLE 2</a></h2>
  <a class='share' href='#'>Share</a>
</div>