How to get ID of clicked element with jQuery

Question

I have the following html:

<a href="#" id="#1" class="pagerlink" >link</a>
<a href="#" id="#3" class="pagerlink" >link</a>
<a href="#" id="#2" class="pagerlink" >link</a>
/*etc.... */

and the following jQuery script:

$(document).ready(function() {
    
    var $container = $('.gallery_r').cycle({ 
        fx:     'scrollHorz', 
        speed:   500, 
        timeout: 0 
    }); 
    
    $('a.pagerlink').click(function() { 
        var id = $(this).attr('id');
        $container.cycle(id); 
        return false; 
    }); 
    
});

the 'pagerlink' links control are to jQuery Cycle slideshow. If I swap this line:

$container.cycle(id);

for this

$container.cycle(7);

It works. (obviously only navigating to slide number 7). So, my question is how can I pick up the ID of the link being clicked and pass it into that line?

`#` isn't a valid character in an `[id]`. – zzzzBov Oct 20 '11 at 15:23 — zzzzBov, Oct 20 '11 at 15:23

score 100 · Accepted Answer · answered Oct 20 '11 at 15:25

Your IDs are #1, and cycle just wants a number passed to it. You need to remove the # before calling cycle.

$('a.pagerlink').click(function() { 
    var id = $(this).attr('id');
    $container.cycle(id.replace('#', '')); 
    return false; 
});

Also, IDs shouldn't contain the # character, it's invalid (numeric IDs are also invalid). I suggest changing the ID to something like pager_1.

<a href="#" id="pager_1" class="pagerlink" >link</a>

$('a.pagerlink').click(function() { 
    var id = $(this).attr('id');
    $container.cycle(id.replace('pager_', '')); 
    return false; 
});

Numeric IDs are actually allowed in HTML5. – mkataja Jul 14 '14 at 14:25 — mkataja, Jul 14 '14 at 14:25

score 9 · Answer 2 · answered Oct 20 '11 at 15:24

9

You just need to remove the hash from the beginning:

$('a.pagerlink').click(function() { 
    var id = $(this).attr('id').substring(1);
    $container.cycle(id); 
    return false; 
});

answered Oct 20 '11 at 15:24

Richard Dalton

35,513
6
73
91

2

The official spec says that IDs should always begin with an upper- or lower-case letter, never a number (or a hash sign). Many browsers will allow it, but you can't expect them to. – Blazemonger Oct 20 '11 at 15:25

score 6 · Answer 3 · answered Dec 06 '19 at 10:17

6

@Adam Just add a function using onClick="getId()"

function getId(){console.log(this.event.target.id)}

answered Dec 06 '19 at 10:17

Anurag M.

146
1
4

score 4 · Answer 4 · answered Oct 20 '11 at 15:24

4

Your id will be passed through as #1, #2 etc. However, # is not valid as an ID (CSS selectors prefix IDs with #).

answered Oct 20 '11 at 15:24

David Neale

16,498
6
59
85

score 2 · Answer 5 · answered Oct 20 '11 at 15:25

2

First off you can't have just a number for your id unless you are using the HTML5 DOCTYPE. Secondly, you need to either remove the # in each id or replace it with this:

$container.cycle(id.replace('#',''));

answered Oct 20 '11 at 15:25

Joseph Marikle

76,418
17
112
129

How to get ID of clicked element with jQuery

5 Answers5

Linked

Related