Get href from one link and clone to another href - javascript

I'm basically trying to get the href from one link and then have that populate into another:
HTML:
Link to thing
<a class="second-link">Link to duplicate</a>
SCRIPT:
$('.main-link').attr('href', $('.second-link').attr('href'));
Trying to get the href from .main-link to populate to .second-link so it should become this:
OUTPUT:
Link to thing
Link to duplicate
Not sure if I have something backwards, but I am not all with it right now so that could be it too.

Your code is setting the href attribute of .main-link rather than .second-link - you need to target the element you want to change:
$('.second-link').attr('href', $('.main-link').attr('href'));

Try this:
var $mainLink = $('.main-link').attr('href');
$('.second-link').attr('href',$mainLink);
The first line retrieves the attribute, the second line shows how to set the attribute by following the attribute name with a comma followed by the value you wish to set the attribute to.

Related

Protractor - checkbox with dynamic id cannot be defined

I need to define a specific check box and (later on) click on it to complete the account creation. The problem is that part of the input id is dynamic and changes with each run. Therefore, my approach below is not working:
var nativeChannels = element(by.css("label[for='dp-native-9597']"));
When I inspect the element, it displays the following:
div class="switch"input id="dp-native-9597" type="checkbox" ng-model="controls.allNativeChannels" class="cmn-toggle cmn-toggle-round ng-pristine ng-untouched ng-valid" autocomplete="off">label for="dp-native-9597">/label/div
label for="dp-native-9597"/label
I searched for a way to put a wild character after dp-native- but looks like this is not allowed. Is there any way to define this type of check box, so that I could move on with tests?
Thank you for your help in advance!
Try using the below xpath.
.//label [contains(#for,"dp-native-")]
There are wild card selectors in CSS (http://www.w3schools.com/cssref/css_selectors.asp) :
[attribute^=value] a[href^="https"] Selects every <a> element whose href attribute value begins with "https"
[attribute$=value] a[href$=".pdf"] Selects every <a> element whose href attribute value ends with ".pdf"
[attribute*=value] a[href*="w3schools"] Selects every <a> element whose href attribute value contains the substring "w3schools"
Try one of these. I think you might search like this:
$(".switch[id*='dp-native'] label")
or by model (http://www.protractortest.org/#/api?view=ProtractorBy.prototype.model) :
element(by.model('controls.allNativeChannels')).$('label');

Why I can not change the href value by jQuery?

Below is my code..
var content = $("XXXX");
content.find("a").each(function() {
var value = $(this).attr('href');
$(this).attr('href', encodeURI(value));
alert(value);
});​
However, it keep showing error.
How can I make this code work which I want to encode the url.
Instead of content.find('a') use content.filter('a'). Because right now you're content is an array of only one element (ie. <a>), so there is no more <a> within that <a> and .find('a') fails here.
So .filter() is safe to use.
Demo
No need to use JQuery.find here as content variable has only anchor tag and you want to apply encodeURI for your URL.
For that requirement below code is well enough.
$(content).each(function(){
var value = $(this).attr('href');
$(this).attr('href', encodeURI(value));
alert($(this).attr('href'));
}
);
Hope it helps you.
maybe you should add an ID (if you want to use this for more than one element then create a specific class for the elements and link via $(".classname")) to your link and then use a normal query like this
var yourLink = $("#yourID");
yourLink.attr('href', encodeURI(value));​
and make sure that your value has something in it. Also if .attr(...) has still no effect please try .prop("href", encodeURI(value))

Change href of a link jquery

currently I have a textbox in which someone can type in a link, and then a link on the page next to the textbox should change it's href attribute to the text the user just typed in.
My javascript:
var LinkText = $("[id$=TextBox]").val();
$("[id$=DocumentLink]").href = LinkText;
My HTML:
<a id ="DocumentLink" target = "_blank" href="http://www.currentlink.com/">Link to Document</a>
<input id="TextBox" type="text" /> `
Although LinkText is picked up as the string typed in the textbox, the second line of my javascript is not working as I want. The link stays as the currentlink.
I have jQuery 1.4.2 if that helps, I could be doing something that doesn't work with that maybe.
Since you have a jQuery object you have to set the attr
$("[id$=DocumentLink]").attr("href", LinkText);
Or you can get the actual HTMLElement at the 0 index and call .href that way:
$("[id$=DocumentLink]")[0].href = LinkText;
And since your matching an exact ID, just use $("#DocumentLink")
Try it:
$("#DocumentLink").attr('href', LinkText);
Regards.
jQuery object doesn't have href property. You are defining a property for the jQuery object which doesn't affect the href property of the HTMLElement object in the jQuery collection. You could use the attr or the prop method instead.
set the attr of the link.
$("[id$=DocumentLink]").attr("href", LinkText);
i think it would be much easier to use JS and innerHTML.

How to find any text within a value of an attribute of a tag using jquery

hi is there any way i can find specific text within a value of an atrribute of an HTML tag, To be more specific, im trying to find out if the tag has "selected" within its "src" attribute e.g in this case i need to find out if selected exists, I can go in other routes to do this but i need this as a condition.
I am selecting the src of the img tag and adding this special text, but i dont want it to keep on adding e.g in this case its defeating the purpose of what im trying to do. I need to know if Selected has been inserted then ignore the particular image.
$(this).hover(function(){
var currentName = $(this).attr("src");
var theNumToSub = currentName.length - 4;
$(this).attr("src",$(this).attr("src").substr(0,theNumToSub)+"selected.jpg");
});
here is my code above for adding "Selected" in the first instance.
You can try with:
$(this).filter('[src$="selected.jpg"]');
it returns the same element if src ends with selected.jpg.
You can also filter if anywhere in src is selected keyword with:
$(this).filter('[src*="selected"]');
You can use the jQuery attribute contains selector :
$("img[src*='selected']");
You can use indexOf()
if($(this).attr("src").indexOf('selected')>0){
//selected is there in src
//your stuff here
}

Get HREF value by class name

I'm trying to get href value of a specific anchor tag placed on a html page.
html tag structure
<a rel="nofollow" title="some title" href="http://www.this-is-what-i-need.com/just-this.html"><span><em class="buttonGo"></em>Go to this page</span></a>
How do I get the href value from above anchor tag using buttonGo class name?
A single line of plain Javascript will give you what you need:
var href = document.getElementsByClassName("buttonGo")[0].parentNode.parentNode.href;
But, if you aren’t sure how many times you need to use parentNode, you have to use a loop:
var anchor = document.getElementsByClassName("buttonGo")[0];
do{
anchor = anchor.parentNode;
} while(anchor.nodeName.toLowerCase() != "a");
var href = anchor.href;
Demo: Solution One (created by Milche Patern) and Solution Two
Using jQuery:
$('.buttonGo').closest('a').attr('href');
Without jQuery, you'll need to start with document.getElementsByClassName('buttonGo'), then crawl up parentElement until you find an a.
jQuery demo
If you want to get attribute of tag on which you are clicking, use:
$(this).attr("href");

Categories

Resources