how to identify li item using jquery

Question

I've a list

<ul>
  <li><a href="?page=4">one</li>    //no 4
  <li><a href="?page=7">two</li>    //no 7
  <li><a href="?page=14">three</li>  //no 14
  <li><a href="?page=72">four</li>   //no 72
  <li><a href="?page=201">five</li>   //no 201
</ul>

Now I want to use ajax to load the pages instead of the normal page load. So how do I detect which link the user clicked using jQuery. Say something like

$('id of the element clicked').click(function()({ 
      // Load the page using .ajax() 
});

In the jQuery code above, how do I get id of the element clicked??

In your html snippet no one element has `id`. Btw, you can use `$(this).attr('href')` — zerkms, May 11 '11 at 06:55
not yet.. i can assign that. I thought i could assign like `id="1"` but says id can't start with in integer — ptamzz, May 11 '11 at 06:57
So if i use `$(this).attr('href')`, then 1) will it still reload the page as the `href` value is still there in the markup; 2) How to I load the page using ajax if I get the `?page=id` string?? Do I use something like `.load()`? — ptamzz, May 11 '11 at 07:00

score 6 · Accepted Answer · answered May 11 '11 at 06:57

You could fetch the id from the href attribute of the clicked anchor using regex:

$('ul a').click(function() {
    var id = this.href.match(/([0-9]+)$/)[1];
    // Load the page using .ajax()  
});

but a better approach IMHO instead of using regex to parse the url is to use HTML5 data-* attributes:

<ul>
  <li><a href="?page=4" data-id="4">one</li>
  <li><a href="?page=7" data-id="7">two</li>
  <li><a href="?page=14" data-id="14">three</li>
  <li><a href="?page=72" data-id="72">four</li>
  <li><a href="?page=201" data-id="201">five</li>
</ul>

and then:

$('ul a').click(function() {
    var id = $(this).data('id');
    // Load the page using .ajax()  
});

Some other answers are suggesting using the id attribute but adding id="4" to the anchor would be invalid markup as according to the specification the id of a DOM element cannot start with a number.

Are there any compatibility issues with `data-id` with older browsers?? — ptamzz, May 11 '11 at 07:02
@ptamzz, please define *older browser*. I would recommend you [modernizr](http://www.modernizr.com/). You may take a look at the [following question](http://stackoverflow.com/questions/2249261/html-5-browser-compatibility-chart-html-5-in-old-browsers) as well. — Darin Dimitrov, May 11 '11 at 07:04

Krimo · Answer 2 · 2011-05-11T07:02:20.610

2

Don't need an id, use $(this) ;)

For example :

$("li").click(function(){
  $(this).//do ajax stuff
});

And if you want to get the href of the clicked element : $(this).children('a').attr('href')

edited May 11 '11 at 07:02

answered May 11 '11 at 06:56

Krimo

954
8
20

This is essentially correct; however, the li needs to be in quotes: $("li").click(... – Luke Dennis May 11 '11 at 06:58

score 0 · Answer 3 · answered May 11 '11 at 06:58

0

you can get the id attribute of the <a> like this:

$("ul>li>a").click(function(){
   // the id of the anchor
   alert($(this).attr('id'));
   // the id of the li
   alert($(this).parent().attr('id'));
   // link's page id
   alert($(this).attr('href').match(/page=(\d+)$/));
});

answered May 11 '11 at 06:58

Teneff

30,564
13
72
103

he wanted the id of the list item, not the anchor. – Nathan May 11 '11 at 06:59

score 0 · Answer 4 · answered May 11 '11 at 06:58

0

to get the id first assign ids to your li and then try this one...

$('li').click(function(){

      $(this).attr('id') ;
});

answered May 11 '11 at 06:58

Vivek

10,978
14
48
66

score 0 · Answer 5 · answered May 11 '11 at 07:25

Bit late but could you not have just done this:

$(function() {
    $('ul li').each(function() {
        $('a', this).click(function(e) {
            e.preventDefault();
            var href = $(this).attr('href');
            $('#somediv').load(href);
        });
    });
});

how to identify li item using jquery

5 Answers5