I'm trying to check all my links for the word .obj in a certain text.
So far I've bin able to hide that link. But I need to get that link in a variable and output it to the console.
How would I do this right?
$(document).ready(function () {
//Hides all link containing .obj
$('a:contains(".obj")').hide();
//Get link in variable (DOES NOT WORK)
var $objlink = $('a:contains(".obj")');
//Show variable in console
console.log($objlink);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a id="link1" href="#">.obj 1</a>
<a id="link2" href="#">.obj 2</a>
<a id="link3" href="#">.foobar</a>
Instead of outputting the whole jquery object, go through it and log the href.
$objlink.each(function(){
console.log($(this).attr('href'))
})
Related
I am trying to run through a list of 6 anchors in a page using javascript to do some operations on them. However, the loop is not getting executed because anchors.length is return 1. The following is my code snippet:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<script type="text/javascript">
function load()
{
alert(document.anchors.length);
for (i = 0; i <= document.anchors.length; i++)
{
alert(document.anchors[i].innerHTML);
}
}
</script>
</head>
<body onload="load()">
<div>
<ul>
<a id="sectionlinks" href="page1.html">link 1</a></li>
<a id="sectionlinks" href="page2.html">link 2</a></li>
<a id="sectionlinks" href="page3.html">link 3</a></li>
<a id="sectionlinks" href="page4.html">link 4</a></li>
<a id="sectionlinks" href="page5.html">link 5</a></li>
<a id="sectionlinks" href="page6.html">link 6</a></li>
<ul>
</div>
</body>
</html>
This is working fine in IE9. But in Firefox and Chrome, it is saying that the count is equal to 1. Would be great if someone can point me to what I have missed here.
As you might have guessed, I am a newbie to JS and am just learning it.
At least, you're learning the correct way, keep going!
What you've done wrong is that document.anchors refers to anchor links (old anchor links using the name attribute), not normal links. For example, the following is an anchor:
<a name="tab"></a>
And the following is a link:
The links are in the document.links HTMLCollection, so you can use document.links.length.
If you want to get all the <a> elements, no matter what's in their attribute, you can use document.getElementsByTagName( 'a' ).length.
See the note in the MDN documentation:
For reasons of backwards compatibility, the returned set of anchors only contains those anchors created with the name attribute, not those created with the id attribute.
The property is designed to find anchors to link to, not from.
Use document.getElementsByTagName('a') to get a collection of <a> elements or document.links to get those and <area>s
Hello I am trying to change input selection to link selection which will be hiding and showing div layers. It looks like my selector is not working correctly since when I select something nothing is happening. Any help how I can resolve this situation are welcome. Here is my code
HTML:
<li><a class="btn-default" id="Section1" name="options-doc">link 1</a></li>
<li><a class="btn-default" id="Section2" name="options-doc">link 2</a></li>
<div class="types" data-period='Section1'></div>
<div class="types" data-period='Section2'></div>
SCRIPT:
$(document).ready(function() {
$(".btn-default").click(function(){
var test = $(this).find("a[name$='options-doc']").id();
$(".types").hide();
$(".types[data-period='" + test + "']").show();
});
});
.id() is not a method in jQuery(or javascript for that matter).
Also, in this case, do not use find() as this is the clicked anchor itself
Try using attr()
var test = $(this).attr('id');
I am trying to assign an anchor's onclick via javascript - see jsfiddle below:
<a id="link_a" class="linka" href="http://www.google.com">link 1</a>
var lnkA=$('.linka');
lnkA.onclick=function(){alert(this.innerHTML);};
fiddle:
https://jsfiddle.net/andrewtr/tkfvyr7o/ Code:
However, it doesn't seem to work. What am I doing wrong? Thanks!
lnkA is a jQuery object which have a method called click to register click handlers
var lnkA = $('.linka');
lnkA.click(function(e) {
e.preventDefault();//to prevent redirection
alert(this.innerHTML)
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<a id="link_a" class="linka" href="http://www.google.com">link 1</a>
<a id="link_b" href="http://www.duckduckgo.com">link 2</a>
http://learn.jquery.com/
http://api.jquery.com/
I have my markup like this. I want that when someone click on the div demo then it will redirect to the second anchor tag link.
<div class="demo">
<div class="social">
<ul>
<li>
<a class="icon"></a>
</li>
<li>
</li>
</ul>
</div>
</div>
So for that I have my jquery like this
jQuery(document).ready(function() {
jQuery(".demo").on('click', function () {
var link = jQuery(this).find('li:last-child').children('a').attr("href");
window.location.href = jQuery(link);
});
});
But this one is showing error in console tab like Uncaught Error: Syntax error, unrecognized expression: with the link . So how to solve this issue?
Assign the href string you got in link variable instead of jQuery object, wrapping link in jQuery function consider it as variable passed selector. I think you wont have any variable defined with the name equal to value of link(varible)
Change
window.location.href = jQuery(link);
to
window.location.href = link;
change this:
window.location.href = jQuery(link);
to this:
window.location.href = link;
That is a variable which stored a href attribute value, so you don't have to wrap it with jQuery to create an object of it.
I am trying to run through a list of 6 anchors in a page using javascript to do some operations on them. However, the loop is not getting executed because anchors.length is return 1. The following is my code snippet:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<script type="text/javascript">
function load()
{
alert(document.anchors.length);
for (i = 0; i <= document.anchors.length; i++)
{
alert(document.anchors[i].innerHTML);
}
}
</script>
</head>
<body onload="load()">
<div>
<ul>
<a id="sectionlinks" href="page1.html">link 1</a></li>
<a id="sectionlinks" href="page2.html">link 2</a></li>
<a id="sectionlinks" href="page3.html">link 3</a></li>
<a id="sectionlinks" href="page4.html">link 4</a></li>
<a id="sectionlinks" href="page5.html">link 5</a></li>
<a id="sectionlinks" href="page6.html">link 6</a></li>
<ul>
</div>
</body>
</html>
This is working fine in IE9. But in Firefox and Chrome, it is saying that the count is equal to 1. Would be great if someone can point me to what I have missed here.
As you might have guessed, I am a newbie to JS and am just learning it.
At least, you're learning the correct way, keep going!
What you've done wrong is that document.anchors refers to anchor links (old anchor links using the name attribute), not normal links. For example, the following is an anchor:
<a name="tab"></a>
And the following is a link:
The links are in the document.links HTMLCollection, so you can use document.links.length.
If you want to get all the <a> elements, no matter what's in their attribute, you can use document.getElementsByTagName( 'a' ).length.
See the note in the MDN documentation:
For reasons of backwards compatibility, the returned set of anchors only contains those anchors created with the name attribute, not those created with the id attribute.
The property is designed to find anchors to link to, not from.
Use document.getElementsByTagName('a') to get a collection of <a> elements or document.links to get those and <area>s