Get li attribute using javascript or jquery.

[zohaib82]

Hi,

I want to get url attribute of li when user click on li.

<ul>
	<li url="http://www.google.com" id="1">Google</li>
	<li url="http://www.yahoo.com" id="2">Yahoo</li>
	<li url="http://www.bing.com" id="3">Bing</li>
	<li url="http://www.facebook.com" id="4">Facebook</li>
	<li url="http://www.amazon.com" id="5">Amazon</li>
</ul>

I found following but no idea how it will work

$('li').click(function() {
    alert($(this).data('url'));
});

Any idea how to get li url value when click using javascript or jquery?

- Thanks
Zohaib.

[ReFreezed]

Change
$(this).data('url')
to
$(this).attr('url')

(Note however that li elements don't have an 'url' property, so your code is not completely valid. But it will probably work anyway in browsers because they are not that strict.)

[zitemediauser]

Naturally <li> don't have url property but with the new HTML5, you can create one like so:

<li data-url="http://www.amazon.com" id="one"> item1 </li>

And then you can call it with:

$('li#one').click(function() {
alert($(this).attr('data-url'));
});

You cannot do this:

$('li').click(function() {
alert($(this).attr('data-url'));
});

Reason is because you have many list, so you need to loop troop them like so:

$('li').each(function() {
$(this).click(function() {
alert($(this).attr('data-url'));
});
});

Reference: http://api.jquery.com/each/

[zitemediauser]

Naturally <li> don't have url property but with the new HTML5, you can create one like so:

<li data-url="http://www.amazon.com" id="one"> item1 </li>

And then you can call it with:

$('li#one').click(function() {
    alert($(this).attr('data-url'));
});

You cannot do this:

$('li').click(function() {
    alert($(this).attr('data-url'));
});

Reason is because you have many list, so you need to loop troop them like so:

$('li').each(function() {
    $(this).click(function() {
      alert($(this).attr('data-url'));
    });
});

Reference: http://api.jquery.com/each/


Regards,
Zitemedia

[ReFreezed]

You cannot do this:

$('li').click(function() {
    alert($(this).attr('data-url'));
});

That's not right. $('li').click(function) will add one event listener to each one of the li elements, so this code works perfectly. It even works better than your other method that uses .each() because there you create a new event handler function for every single element, which would be completely unnecessary!

'this' in the above code always refers to the clicked li element. The other elements are not affected at all.