I want append <span></span> tag in my every <a> tag:
now:
<a href=#>aaa</a>
<a href=#>bbb</a>
<a href=#>ccc</a>
I want:
<a href=#><span>aaa</span></a>
<a href=#><span>bbb</span></a>
<a href=#><span>ccc</span></a>
now ,i using below codes to implement it:
$(function(){
var buttons = $("a");
var text=buttons.text();
buttons.text("");
buttons.prepend("<span>"+text+"</span>");
});
I think this codes is not good,how to simplify it?
thanks :)
I think What you are looking for is the wrapinner function.
$("a").wrapInner("<span></span>")
You can find a working example here.
Related
I am trying to dynamically append a string to href using jquery 'attr'. I am not able to understand why the below code that I wrote is appending the string twice in existing href. Please help. I have read a lot many articles but unfortunately not help.
var olduri = $('a.link').attr("href");
$('a.link').attr("href", olduri + 'www.google.com');
HTML code is:
<div>
<a class="link" target="_blank" title="Welcome" href="https://example.com?redirect=www.test.com&">
Click</a>
</div>
Result is:
https://example.com?redirect=www.test.com&www.google.comwww.google.com
www.google.com is coming twice. Please help me get it fixed.
I don't quite understand why you want the & as the only separator for these but my suggestion for a cleaner approach is to update the search property not the attribute
$('a.link').prop("search", function(i, curr){
return curr + 'www.google.com';
});
console.log($('a.link')[0].href)
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div>
<a class="link" target="_blank" title="Welcome" href="https://example.com?redirect=www.test.com&">
Click</a>
</div>
Your code just works fine. See here. Also a bit of context would really help. Are you planning to append the url onclick event?
$('.showUri').text($('a.link').attr("href"));
$('a.link').on('click', function(e){
e.preventDefault();
var oldUri = $(this).attr('href');
$(this).attr('href', oldUri + 'www.google.com');
$('.showUri').text($('a.link').attr("href"));
});
<div>
<a class="link" target="_blank" title="Welcome" href="https://example.com?redirect=www.test.com&">
Click</a>
</div>
<p class="showUri"></p>
I hope to remove the link "ContactUs.aspx" of the following code, I use the code $("#Main4").contents().unwrap(); it worked, but the class "LeftMainMenu" is removed also.
I hope to remove only the link, how can I do this?
<a id="Main4" class="LeftMainMenu" href="ContactUs.aspx">Contact Us</a>
<a id="Main4" class="LeftMainMenu" href="ContactUs.aspx">Contact Us</a>
This will remove the href attribute:
$("#Main4").removeAttr("href")
Remember to do it on page load event like below:
$(function() {
$("#Main4").removeAttr("href")
});
Or if you just want to remove the value of href then
$("#Main4").attr("href", "")
This will make
<a id="Main4" class="LeftMainMenu" href="">Contact Us</a>
DEMO:
$(function() {
$("#Main4").removeAttr("href")
});
<script type="text/javascript" src="http://code.jquery.com/jquery-1.11.0.js"></script>
<a id="Main4" class="LeftMainMenu" href="ContactUs.aspx">Contact Us</a>
Your jQuery selector is wrong. Should be $("#Main4"). You can use .removeAttr() to remove the attribute of href. See the documentation here.
$("#Main4").removeAttr('href');
To remove the href you can use
$('#Main4').removeAttr('href');
To remove only the link you can use
$('#Main4').attr('href','');
if you want the link hidden, you can:
$('#main4').hide();
if you want the link disabled, you can:
$('#main4').removeAttr('href');
or
$('#main4').attr('href','#');
or
$('#main4').attr('href','javascript:void(0);');
By the way, the different href attribute about
'javascript:void(0)' and '#' is there.
I have read the following question
Javascript and Anchor Tags, Best Practice?
And it seems to suggest a solution such as the following
<a id="foo" href="#">Click Me</a>
document.getElementByID("foo").onclick = function() { alert("hi"); }
However suppose that I have a bunch of links all calling the same function with a different parameter. My quick and dirty solution would be to generate something like the following
Click Me 1
Click Me 2
Click Me 3
Is there a way to adapt the listener solution to deal with parameters?
You could use a data attribute along these lines on each element in question:
Click Me 1
And use the following callback:
document.getElementById("foo").onclick = function() {
alert(this.getAttribute('data-id'));
}
In fiddle form here.
A better option, though, might be to use jQuery to handle things. Assuming the link format above, that would look like this:
$('#foo').click(function(){
alert($(this).attr('data-id'));
});
You can use delegation.
<div id='links'>
<a href="#" class="link" data-param1='1000' data-param2='something'>click</a>
<a href="#" class="link" data-param1='1001' data-param2='something'>click</a>
<a href="#" class="link" data-param1='1002' data-param2='something'>click</a>
</div>
<script type='text/javascript'>
$links = document.getElementById("links");
$links.onclick=function(e){
element = e.target;
if(element.tagName="a" && element.getAttribute("class")=="link"){
console.log(element.getAttribute("data-param1"))
console.log(element.getAttribute("data-param2"));
}
return false;
}
</script>
Notice that when you have in HTML a code like that:
Click Me 1
It's exactly the same to have in JS:
document.getElementById("foo").onclick = function(event) {
myFunction('1001');
return false;
}
When the parser found an event attribute, it creates an anonymous function in exactly the same way.
My code is:
<input class="button" type="button" value="Mark" onClick="doCheck('mark');" \>
I want to make it using an
<a>
link. Is it possible to do this? I only know how linking to another page.
Use Like that
<a class="button" href="javascript:void(0)" onClick="doCheck('mark');" >Mark</a>
or this way
<a class="button" href="javascript:doCheck('mark')" >Mark</a>
< a href='javascript:void(null);' onclick='doCheck()' > Test </a>
<a onClick="doCheck('mark');"> Mark </a>
You can attach click handlers to any DOM element that is visible on the page. I would seperately recommend seperation of markup and javascript.
So something like.
<a id="mark">
...
<script type="text/javascript">
$(function() {
$("#mark").click(function() {
doCheck("mark");
});
});
</script>
Would be preferable. In this case $ is jQuery. A pure javascript solution is possible but that has a lot of boilerplate code that hides the point.
You can use the onClick attribute on any html element. So use it in your a tag or in your img tag.
This code example will execute the JavaScript without following the link:
Mark
If you want to follow the link, drop the return false; part:
Mark
How can you do something like this:
<a href="some javascript statement that isn't a function call;" >myLink</a>
And have the js in the href execute when the link is clicked.
Just put the JS code directly in there:
fsljk
Though, you should not be doing inline scripting. You should unobtrusively attach event handlers.
<a id="lol" href="/blah">fdsj</a>
<script>
document.getElementById('lol').onclick=function() {
/* code */
};
</script>
<a href="javascript:var hi = 3;" >myLink</a>
Now you can use hi anywhere to get 3.
You can write inline-code in the same way as
<a href="javascript:[code]">
This method is also available in other tags.
addition
if you want to Execution when something tag clicking, you can fix with onClick attribute
<a onClick="function()">
I know this question is old but I had a similar challenge dynamically modifying the href attribute that sends an email when the anchor tag is clicked.
The solution I came up with is this:
$('#mailLink,#loginMailLink,#sbMailLink').click(function () {
this.setAttribute('href', "mailto:" + sessionStorage.administrator_mail_address + "?subject=CACS GNS Portal - Comments or Request For Access&body=Hi");
});
<a id="loginMailLink" href= "#" style="color:blue">CACS GNS Site Admin.</a>
I hope that helps.