get id of anchor inside list item, Javascript - javascript

Using Javascript, How to get id of list item, onclick of anchor tag inside list item. Ex.
<ul id="ul1">
`<li id=li1">Click</li>`
</ul>
Thanks to everyone

$('li').on('click', function(){
var $this = $(this), id = $this.attr('id');
// do something with id
});
This works because you the this variable refers to whatever li was clicked on

If you want the id of the parent:
$('a').on('click',function () {
var id = $(this).parent().attr("id");
// some script
});
EDIT
Take into considerations NewbornCodeMonkey's comment about the href linking to a different page...
Plain Javascript
You will need to add an onclick event to your anchor. You can't do it unobtrusively. So:
<a onclick="myfunction()" href="...">...</a>
javascript:
function myfunction() {
var id = this.parentNode.id;
// some script
}

The issue with your current code is that you will be redirecting your page from the anchor tag. You can use the href attribute to instead call a javascript function, or remove the anchor tag and use jquery to react to a mouse event using either the click function or the on function with click as a parameter.
Using the anchor tag, you can do something like this:
<li id=li1">Click</li>
function myClickFunction(){
var id = this.parentNode.id;
// use ID here
};
NOTE: If you still wish to redirect, then you can also leave the anchor tag pointing to page1.html, and use jquery to listen with one of the above functions that I have linked (.on or .click)
Another option instead of jquery is the getAttribute function
an example of getAttribute:
document.getElementsByTagName("a")[0].getAttribute("id");

Related

How to store the element inside anchor tag in a variable?

I am using table and the element inside the table are added dynamically with the JSON data. The table data consists of Id and other things. I had put id inside the anchor tag so that it gets navigated to another page which shows all the data of that Id. I want to show the data of only selected Id. So I want to set the element inside the anchor tag to a variable ... is there any way to achieve this ?
<a href="other_page.html">link Label<a>
Now I want to store this "link Label" into a variable in JavaScript or AngularJS is there any way?
You can use data attribute for this. for example
<a href="other_page.html" data-id="3" id="click">link Label<a>
and in you javascript :
<scrtipt>
document.getElementById("click").addEventListener("click", function(event){
alert(this.getAttribute("data-id"));
});
</script>
Hope it can be helpful.
<a id="jsonObject.id" href="other_page.html" onClick="clickFunction">link label</a>
You can set anchor id with that particular id. Then on click function you can send event object and get that particular ID.
JS code
function clickFunction(event){
console.log(event.currentTarget.id);
}
Sure you can do!
You can get the text inside tags by calling .innerHTML of the element. In your case this would mean something like this:
<a href="other_page.html" id="tagid">link Label<a>
You need an id for the tag and then in JavaScript
var value = document.getElementById("tagid").innerHTML;

How can I get text from href?

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.

Find a href and match a div

I have this variabele.
var href = $(this).attr('href');
I get the href from a link. Now i have a lot of display none div's on the page. I want to check if the div have the same id. The id that is in the href. Then the div must be show.
How can i make that check?
Concatenate your href variable with a number sign to produce a jQuery ID Selector, and call .show() on your returned object:
$('#' + href).show();
From my understanding you have a bunch of hidden DIVs that you want to show based on the anchor ID. the code below should work however you should not have more than one ID on a page no matter what element it is assigned to. Best practice is to use classes. It would work the same.
// create a click function for the anchor tag
$('a').click(function(){
//grab the id of the selected anchor tag if if has one if not it will be undefined.
// $(this) represents the current anchor tag in the scope of the click function.
var href = $(this).attr('id');
// look for any other element with the same id and set it to show.
$('#'+href).show();
// cancel the anchor page action.
return false;
});
that's True when using JQuery Selector you can Use Exact
$('#' + href + '').show();

How would I get a classes href below it?

<li class="catalog-list-item" data-icon="false">
<a href="/items/170893265">
How would I get the href /items/ and console.log the ID under catalog-list-item?
I tried parentNode and stuff, nothing seems to work for me.
To log the href attribute, I'd do something like this
$(".catalog-list-item a").each(
function(){
console.log($(this).attr("href"));
});
I don't completely catch the idea of logging the ID - there is no ID mentioned in your code example.
By using jQuery selector (jQuery documentation, W3Schools), you can retrieve all anchor tags that are children of an element with the '.catalog-list-item' class.
var allAnchorTags = $(".catalog-list-item a");
You can get the href attribute value by using .attr-method.
With the .replace-method you can replace the '/item/' string in front of the id.

multiple anchor tag with same class. find which anchor tag getting clicked?

I have html where I have multiple anchor tag with same class. Juqey selecting 1st anchor tag only. Even i click other anchor tags it returns 1st anchor tag href value. I want jquery which should find anchor tag being clicked in DOM and get that anchor tag href value.
I want to set this href value as var and use that var for other fn.
Very Simple:
$(document).ready(function () {
jQuery('.className').click(function (event) {
var hr = $(this).attr("href");
alert(hr);
});
});

Categories