I have the following html generated by a CMS for a tabbed element:
<li class="active" style="width: 233px;">
Open Tickets
</li>
I want to change the link's text of "Open Tickets" to other text, but I only know the link's href.
How can I do this with jQuery? Thanks!
$('a[href="#tabopen_tickets"]').html('your new value');
Try
Attribute Equals Selector [name="value"]
$('a[href="#tabopen_tickets"]').text('Changed');
$('a[href="#tabopen_tickets"]') will select the a tag with href attribute #tabopen_tickets"
You can use:
$('li.active a').text("new text here");
if you want to get it by href then use attribute equal selector:
$(a[href="#tabopen_tickets"]).text("new text here");
You can select link with jquery that contains, start or end with some text like this
var link = $('a[href*="#tabopen_tickets"]') and
then change the link text like link.innerHTML("new text");
Documentation can be found here
Related
I've got problem with getting this text from href. I'm working on dom and I'd like to get text from this href:
<div class='xx'>
<a href='zz' class='button>
...
I was trying to do sth like that:
document.getElementById(".xx").getAttribute("href")
But it's not working properly
But it's not working properly
Because
you don't have an element with id attribute .xx,
.xx targets the div not the anchor
Also, your anchor tag's attribute class is not closed properly, also closing tag is not given either.
<div class='xx'>
<a href='zz' class='button'>Some text</a>
</div>
you have a class so use the class selector itself using querySelector
document.querySelector( ".xx .button" ).getAttribute( "href" )
or simply
document.querySelector( ".xx .button" ).href;
getElementById will grab an element by that ID. You have an anchor (malformed albeit) with not an ID but a class. Secondly you are targeting the parent div. You should be targeting the tag using querySelector() instead. Then to get the href you'd use href.
const href = document.querySelector('.xx .button').href;
console.log(href);
<div class='xx'>
<a href='zz' class='button'></a>
</div>
This works for me
document.getElementsByClassName("xx")[0].getElementsByTagName("a")[0].getAttribute("href")
The code below will get text from link:
var x = document.getElementsByClassName('xx')[0].getElementsByTagName("a")[0].getAttribute("href");
you can use id instead of class because class returns undefined value.and also you tried to get class using getby id
wrong:
document.getElementById(".xx").getAttribute("href")
function h()
{
alert(document.getElementById("button").href);
}
<a href='zz' id='button' onclick='h();'>
asd</a>
var yourhref = document.querySelector("div.xx a.button").href
yourhref holds your requested value. This is as precise as it gets using only the part of code you provided. If somewhere else on the page you have a div with class xx and a link with class button you are not gonna have a good time.
Solution - either have your targeted element or parent have UNIQUE id and then write a selection from there.
I am new to angularjs. I am using a textangular to show a html document. I want to highlight some words from that html and also want to focus that word.So, I am using tabindex and class = mark to highlight and focus. So, Here At first I am adding
<span class="mark">ABC</span>
so that It will get highlighted, after that I want to add a tabindex=1 attribute to this .So that It become like
<span class="mark" tabindex="1">ABC</span>
Here I want to add this tabindex dynamically. That means , I want to find that text and then add a tabindex to that text only.How can I achieve this ?At a time tabindex can be applied to only one word.
.focus() or keyboard navigating / tabindexing <span>'s is not reliable.
You need to use empty hyperlink tags, like so:
ABC
$("button").click(function() {
$("a.mark:contains('ABC')").focus();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
ABC
ABC1
<button>Next</button>
You can try with contains() like this.
Change span to a to get default href highlighter.
$("button").click(function() {
$("a.mark:contains('ABC')").attr("tabindex", 1);
$("a.mark1:contains('ABC')").attr("tabindex", 2);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a class="mark" href="#">ABC</a>
<a class="mark1" href="#">ABC</a>
<button>Next</button>
I would like to add an image inside of a dynamically created link element using Javascript. Here is my code:
a.textContent = "My Link";
a.setAttribute('href', "#");
I would like the image to appear before the text in the link (My Link). In HTML, the resulting link would be:
<img src="foo.gif">My Link
How can I do this?
You can use insertAdjacentHTML with afterbegin,
a.insertAdjacentHTML("afterbegin", "<img src='foo.gif'>")
The above code will prepend the image element supplied as a html string into the target anchor element.
$('#testImage').html('<img src="foo.gif">My Link');
Use this
I have seen the post How to update (append to) an href in jquery? , but it doesn't seem like the answer can help at my case.
I am currently using a plugin(easytab) to create a few different tab and every tab contains a tag like <a id="tabopen" href="www.text.com/custom/questions/ask/">
<a id="tabopen" href="www.text.com/default/questions/ask/">
and for some reason I have a button which append some extra path to all the href in order to redirect user to the right place.
I have tried to use
$("a#tab1").each(function() {
var _href = $(this).attr("href");
$(this).attr("href", _href + 'startDate=20160121?endDate=20160212');
});
but instead append the 'startDate=20160121?endDate=20160212' it replace everything to www.text.com/custom/questions/ask/startDate=20160121?endDate=20160212 , which is not right, how should i fix it?
Update 1:
I am sorry that i have provide wrong description at, the ids are actually the same in the plugin.
<a id="tabopen" href="www.text.com/custom/questions/ask/">
<a id="tabopen" href="www.text.com/default/questions/ask/">
$("a#tab1") selects a single <a> element having ID as tab1. To change the href attribute of a single element there is no need of each.
var href = $('a#tab1').attr('href') + '?startDate=20160121&endDate=20160212';
$('a#tab1').attr('href', href);
If having multiple elements with same ID, ID should be unique.
To select all the elements whose ID starts with tab, you can use attribute start with selector. I'll suggest to use a unique class on them.
To change the href attribute value of all the matched elements .attr(attributeName, function) with callback function can be used.
$('a[id^="tab"]').attr('href', function(i, oldHref) {
return oldHref + '?startDate=20160121&endDate=20160212';
});
As said by #charlietfl in the comment, the querystring format should be as follow
'?startDate=20160121&endDate=20160212'
^ ^
Update:
Saying again, ID should be unique., you can use class instead of ID for similar purpose elements.
Change the markup to use class
<a class="tabopen" href="www.text.com/custom/questions/ask/">
<a class="tabopen" href="www.text.com/default/questions/ask/">
And then use the selector
$('.tabopen').something...
BAD PRACTICE:
If you can't change the markup(auto-generated markup by some plugin), you can use attribute value selector to select all elements having same ID
$('a[id="tabopen"]').something...
I want to place some text as link inside a div.
For example, I want to place text 'Google' with hyperlink <a href="http://www.google.com" inside a div having class-id as "my-link".
How can this be done using jquery or javascript?
Class and ID is not the same.
If ID try this:
$('#my-link').html('Google');
Demo with ID
If Class try this:
$('.my-link').html('Google');
^
Demo with class
You can do this :
$('.my-link').html('Google');
but it would add hyperlink to all .my-link divs, so it's better to add an ID to div and use the ID on jQuery code.
If my-link is the class of the target div then
$('.my-link').html(function(idx, html){
return html.replace(/Google/g, 'Google')
})
Demo: Fiddle