Copy text and paste into a href jquery

Hi all,

How can I copy the text from <div class="copy-link">textToCopy</div>, and append inside href of <a href="" class="tour-link"> ?

I also have a number of containers, which all have the same class, I need to change each container separately.

I need to change:

> <div class="tour-link-wrapper">
>   <a class="tour-link" href=""></a>
>   <div class="copy-link">www.eaxmple1.com</div>
> </div>
> <div class="tour-link-wrapper">
>   <a class="tour-link" href=""></a>
>   <div class="copy-link">www.eaxmple2.com</div>
> </div>

into

> <div class="tour-link-wrapper">
>   <a class="tour-link" href="www.eaxmple1.com"></a>
>   <div class="copy-link">www.eaxmple1.com</div>
> </div>
> <div class="tour-link-wrapper">
>   <a class="tour-link" href="www.eaxmple2.com"></a>
>   <div class="copy-link">www.eaxmple2.com</div>
> </div>

I was trying:

var a = $('.copy-link').html();
var b = $('.tour-link').html(a);

Any ideas best way to achieve this?

Thanks
Barry

that would copy the first URL into every link, as per jQuery documentation.

with your HTML setup you can go relative since the link is the previous sibling to the div.

Thanks Dormilich

How could I code this?
Each tour-link-wrapper has a different link, I need away of changing only the link inside each container, otherwise they will all have the same link as the first instance.

Cheers, Barry

Can anybody help?

I’ve managed to add a link into the href so the output looks like
<a class="tour-link" href="bbc.com"></a>

Using:

$("div.tour-link-wrapper").find("a.tour-link").each(function(){
	var href = $(this).attr('href');
  $(this).attr('href', href + 'bbc.com');
});

How can I add the links as mentioned in first post?

Thanks, Barry

$('.tour-link-wrapper').each(function(){ 
    var _linkUrl = $(this).find('.copy-link').text();
    $(this).find('a.tour-link').attr('href', _linkUrl);
});

I don’t know what the bbc.com is for.

This is perfect mawburn :smile:

In this instance, the link will be wrapped around an image so no text is needed.
I seen your other snippet with the text, also good to know, thanks will come in handy, if you want to add that back.

[quote=“mawburn, post:5, topic:208990”]
I don’t know what the bbc.com is for.
[/quote]I was just using bbc.com as an example to show what I was trying to do.

And is there a reason you added the _ to _linkUrl var?

---- Bonus question ----

Now that we have copied the text and populated the hrefs, would it be possible to remove all <div class="copy-link"></div> ?
I can do this using css display:none, though I think it would be best if we remove completely from the dom.

Cheers, Barry

From what I can see is the new variable better readable so you know what’s goingoing on.

It’s just a naming convention, nothing more. I put _ in front for locally scoped variables. You’ll see it pretty often in JS.

JavaScript uses variable hoisting which can cause problems. The leading underscore just says “this variable is defined immidiately and used here and no where else.” So that you can help avoid corrupting variables by naming them the same thing.


To remove an element, just use the jQuery .remove() method. Set the jQuery element to a variable so you don’t have to find it twice (which can be expensive).

$('.tour-link-wrapper').each(function(){ 
    var $copyLink = $(this).find('.copy-link'); 
    var _linkUrl = $copyLink.text();
    $copyLink.remove();
    $(this).find('a.tour-link').attr('href', _linkUrl);
});

https://api.jquery.com/remove/

The $ prefix is another naming convention saying “this is a jQuery” element.

Feel free to name the variables anything you want.

Thanks for sharing, I’ll keep a look out.

Yes this works well mawburn, just what I needed :smile:

Ok, thanks for all the information, really helped.

I have one more issue.
With our existing code, I’ve tried to extend this function to do something very similar with the image tag.

I now need to copy the img src and place this inside a css background-image style, I’ve tried the below using the same technique, though something’s not right, if you can spot what I’m doing wrong? Cheers.

The goal:
<div class="tour-link__bg-image" style="background-image: url("IMG_974.jpg");">

updated html

>     <div class="tour-link-wrapper">
>       <a class="tour-link" href="">
> <div class="tour-link__bg-image">
>   <img src="/assets/images/IMG_974.jpg">
> </div>
>       </a>
>       <div class="copy-link">www.eaxmple1.com</div>
>     </div>

updated js

> $('.tour-link-wrapper').each(function(){ 
>   var $copyLink = $(this).find('.copy-link'); 
>   var _linkUrl = $copyLink.text();
>   var $copyBgImg = $(this).find('.tour-link__bg-image');
>   var _imgUrl = $copyBgImg.attr('src');
>   $copyLink.remove();
>   
>   $(this).find('a.tour-link').attr('href', _linkUrl).text(_linkUrl);
>   $(this).find('div.tour-link__bg-image').css('background-image', _imgUrl);
> });

JSFiddle if things are easier http://jsfiddle.net/S8RNE/43/
I added the text link just for example purposes.

Thanks, Barry

.text(_linkUrl) clears out the entire div and replaces it with the _linkUrl text. Including your inner div tour-link__bg-image.

Good catch mawburn :sunglasses:
That explains why I could not see the images.

Ok, moving forward, how can we add the image src as a style=“background-image…” like we have with the links. Is seems like the same process, not sure of the correct methods to use?

I’ve update the fiddle if this helps http://jsfiddle.net/S8RNE/44/

As mentioned above, I’m trying to add the images src onto the div container as a css style:

<div class="tour-link__bg-image" style="background-image: url("IMG_974.jpg");">

I will also remove the images once we have copied the src, like we have with the links.

And I’m sure you’ll be asking why? Why am I doing things this way, it’s because of a CMS I’m using which is making things very hard to do the simplest things, jQuery seems like the only way right now.

Cheers, Barry

I think what you have will work fine. But you either need to escape the inner quotes, or use single.

Using single quotes is better. You can use them either on the URL or on the html element itself. It only matters that the inner and outer are different.

<div class="tour-link__bg-image" style="background-image: url('IMG_974.jpg');">

Thanks mawburn

I am familiar with the double and single quote issue, though I think you have misunderstood what I’m trying to do.

As things stand, on inspection of the code you’ll see:

> <div class="tour-link__bg-image">
>       <img src="/assets/images/IMG_974.jpg">
> </div>

What I need is to remove the image but copy the src, image location and display it onto a background style:

<div class="tour-link__bg-image" style="background-image:url('IMG_974.jpg')"></div>

Simply copy the img src and place it inside a style attached to the div container.

Does that make sense?

Cheers, Barry

Yeah, I’m not following.

Isn’t that what this does?

$(this).find('div.tour-link__bg-image').css('background-image', _imgUrl);

Edit… oh. nvm

$(this).find('div.tour-link__bg-image').css('background-image', 'url('+ _imgUr +')');
1 Like

I was half way there, just missing ‘url(’+ _imgUr +‘)’ :smile:

This is perfect mawburn, you put me on the right track.

After everything was setup, I was returning an undefined value, after much testing, I forgot to add img onto the selector var $copyBgImg = $(this).find('.tour-link__bg-image img');

Everything is working good, just how I need it, thanks again for your help and information.

Ok, the finished script:

`$(‘.tour-link-wrapper’).each(function(){
var $copyLink = $(this).find(‘.copy-link’);
var _linkUrl = $copyLink.text();
var $copyBgImg = $(this).find(‘.tour-link__bg-image img’);
var _imgUrl = $copyBgImg.attr(‘src’);

$copyLink.remove();
$copyBgImg.remove();

$(this).find(‘a.tour-link’).attr(‘href’, _linkUrl);
$(this).find(‘.tour-link__bg-image’).css(‘background-image’, ‘url(’+ _imgUrl +‘)’);

});`

I also updated fiddle for reference http://jsfiddle.net/S8RNE/45/

Cheers, Barry

1 Like

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.