The script is used in a php file and it diplays a linked alexa rank image:
<script type="text/javascript" src="http://xslt.alexa.com/site_stats/js/t/a?url=x-invest.net"></script>
This is the result:
<a class="AlexaSiteStatsWidget" href="http://www.alexa.com/data/details/main?url=http://xxx">
<img alt="Alexa Certified Site Stats for xxx" src="http://xsltcache.alexa.com/site_stats/gif/t/a/eC1pbnZlc3QubmV0/s.gif" border="0">
</a>
I want to get target="_blank" in the < a > tag.
This is what i tried already:
<script>document.getElementsByClassName("AlexaSiteStatsWidget").setAttribute('target', '_blank');</script>
<script>$('#AlexaSiteStatsWidget a').attr('target', '_blank');</script>
But they both dont work.
Just change this:-
<script>document.getElementsByClassName("AlexaSiteStatsWidget").setAttribute("target","_blank");</script>
To this :-
<script>document.getElementsByClassName("AlexaSiteStatsWidget")[0].setAttribute("target","_blank");</script>
And remove this line :-
<script>$('#AlexaSiteStatsWidget a').attr('target', '_blank');</script>
I don't know if it's gonna work but if you create an event listener on your <body>'s <a>s elements like this:
<script type="text/javascript">
document.querySelector("body a.AlexaSiteStatsWidget").addEventListener("click", function() {
this.setAttribute("target", "_blank");
});
</script>
I didn't test it but i guess it gives you an idea of what i want to say
getElementsByClassName returns an array of all nodes (html elements) with the class name provided. If you only have one html element with the specified class, it will still return an array containing one node.
If you want to apply this to one <a> element use:
<script>
document.getElementsByClassName("AlexaSiteStatsWidget")[0].setAttribute('target', '_blank');
</script>
If want to apply this to multiple <a> elements:
<script>
var alexaArray = document.getElementsByClassName("AlexaSiteStatsWidget");
for(var i = 0; i < alexaArray.length; i++){
alexaArray[i].setAttribute('target', '_blank');
}
</script>
Related
I whant to write Links in the data atribute and to save up code lines I whant to create the links with a standart text and the href of course with js/jquery
var mdUrl = $(".md")this.data('md');
$(this).html("YES click <a href='" + mdUrl + "'>here</a>");
If i understand it right, you want sth like this
<div class="md" data="coolsite.com">content.</div>
converted to:
<div class="md">content click here</div>
You could do this with the following js:
<script>
window.onload=function(){
mds=document.getElementsByClassName("md");
mds.forEach(function(md){
md.innerHTML=md.innerHTML+"<a href='"+md.data+"'> click here</a>";
});
};
</script>
This loops trough the elements with the "md" class and adds a link to their inner html
I am completely new to jQuery. I can't find any good documentation on the get function and was wondering if I could get some help.
I have an HTML page called me.html with just a single div called me. I want to use the following page to get the contents within the div. Even a google in the right direction would help. Thanks so much
<head>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript" src="data.js"></script>
</head>
<body>
<form id="form" runat="server">
<div>
<div id="me">
</div>
</div>
</form>
</body>
</html>
you don't need to use get(). This simple script should do it
<script>
var contentsOfMe = $('#me').html();
</script>
get is used for loading data from an url. You seem to be wanting to get the contents of a div
as in $("#me").text()
What about using the great documentation provided at http://api.jquery.com/jQuery.get/
EDIT. If you want to just get the text, use var myText=$('#me').html();, and if the html, use var myHtml=$('#me').html();
You will find the documentation for the function get here : http://api.jquery.com/jQuery.get/
But get is to perform an ajax request get on your server so I don't think that's what you need.
In jquery, most of the time you will "select" an element using jquery selector : $("#id")
This will select $(), this will say you are selecting an element using his id $("#name_of_the_id").
Then, you will have an object which will represent the selected element.
If you want to get all the html inside this element do :
function getHtmlFromElementId(id)
{
var element = $("#" + id);
var html = element.html();
return html;
}
Printing the return of this function will print all html code inside the element selected.
If you are seaching for a good tutorial on jquery, the w3schools' one is really good:
http://www.w3schools.com/jquery/jquery_examples.asp
<script type="text/javascript" src="jquery.js"></script>
<script>
var printLinks = function () {
var links = $(.info).code;
document.write(links);
};
</script>
<form>
<input type="button" value="printlinks" onclick="printLinks()"></input>
</input>
</form>
I am trying to write to a document all of the text in a certain element type that is a child of an element I query by class $(.info). I know document.write is not the best method for writing to a document. info is the class of the parent element of the <code> tags that contain the links I want to print. I am very new to jQuery so I am probably misusing it. Any help would be appreciated.
Okay, if I understand correctly, you want to grab the content in the element with the class info. If that is correct you want to take the following approach:
<script type="text/javascript">
function printLinks() {
var content = $('.info').html(); // Grab innerHTML of element
$('#idOfTargetElement').html( content ); // write the content here
}
</script>
EDIT:
See this fiddle for clarification:
http://jsfiddle.net/XD5qj/
You can use the html() function of jQuery.
For example:
<script>
$(function(){
var links = $('.info code').html();
$('.output').html(links);
});
</script>
<div class="info"><code>Example code</code></div>
<div class="output"></div>
If you have multiple "< code>" tags, you want to use the handy "each()" function of jQuery:
$('.info code').each(function(){
$('.output').append($(this).html());
});
<script type="text/javascript">
$(document).ready(function() {
$("a").click(function() {
$("#results").load( "jquery-routing.php", { pageNo: $(this).text(), sortBy: $("#sortBy").val()} );
return false;
});
});
</script>
<div id="results"> </div>
1
2
that code works fine, only problem that after I run it all my a href links stop to work! The links become jquery ajax calls.. why?
You're $("a") selector matches all <a ...> tags, you need to change it to something more specific:
$("a#someid")
$("a.someclass")
$("div#somecontainer a")
To target specific links, use the id or class tag on your anchor tags.
E.g.
<a class="link1" href=""></a>
<a id="link2" href-""></a>
Do note that id tags are unique within a page and can only be used once.
Reference those links in jQuery using:
$('a.link1').click(function() {}
$('#link2').click(function() {}
or you can combine both:
$('a.link1, #link2').click(function() {}
What you need to do is assign an id or class tag to the link that will call the ajax request. E.g. <a class="ajax" href="">ajax</a> and referencing it with $('a.ajax').click(function () {}
Your setting the onclick event of all anchor tags on the page. Try only selecting the link that you want instead of the more general $("a")
Your selector $("a") indicates all the hiperlink in your page.
You may need to give a specific id to the hiperlink where you want your ajax call to work and then change the selector based on that.
ex:
<a id= "my-link" href="" >ddd</a>
$("a#my-link").click()
I'm trying to get href value using jQuery:
<html>
<head>
<title>Jquery Test</title>
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$("a").click(function(event) {
alert("As you can see, the link no longer took you to jquery.com");
var href = $('a').attr('href');
alert(href);
event.preventDefault();
});
});
</script>
</head>
<body>
jQuery
</body>
</html>
But it doesn't work. Why?
You need
var href = $(this).attr('href');
Inside a jQuery click handler, the this object refers to the element clicked, whereas in your case you're always getting the href for the first <a> on the page. This, incidentally, is why your example works but your real code doesn't
You can get current href value by this code:
$(this).attr("href");
To get href value by ID
$("#mylink").attr("href");
It's worth mentioning that
$('a').attr('href'); // gets the actual value
$('a').prop('href'); // gets the full URL always
It works... Tested in IE8 (don't forget to allow javascript to run if you're testing the file from your computer) and chrome.
if the page have one <a> It Works，but，many <a> ,have to use var href = $(this).attr('href');
Assuming you have this html :
<a class ="linkClass" href="https://stackoverflow.com/"> Stack Overflow</a>
You can get and display the href attribute with this JS snippet :
<script>
$(".linkClass").click(function() {
alert($(this).attr("href"));
});
</script>
**Replacing href attribut value to other**
<div class="cpt">
testoneLink
</div>
<div class="test" >
testtwoLInk
</div>
<!--Remove first default Link from href attribut -->
<script>
Remove first default Link from href attribut
$(".cpt a").removeAttr("href");
Add Link to same href attribut
var testurl= $(".test").find("a").attr("href");
$(".test a").attr('href', testurl);
</script>
If your html link is like this:
<a class ="linkClass" href="https://stackoverflow.com/"> Stack Overflow</a>
Then you can access the href in jquery as given below (there is no need to use "a" in href for this)
$(".linkClass").on("click",accesshref);
function accesshref()
{
var url = $(".linkClass").attr("href");
//OR
var url = $(this).attr("href");
}