How to get ID of clicked element with jQuery

JqueryJquery Cycle

Jquery Problem Overview


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?

Thanks in advance!

Jquery Solutions


Solution 1 - Jquery

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; 
});

Solution 2 - Jquery

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; 
}); 

Solution 3 - Jquery

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

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

Solution 4 - Jquery

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

Solution 5 - Jquery

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('#','')); 

Attributions

All content for this solution is sourced from the original question on Stackoverflow.

The content on this page is licensed under the Attribution-ShareAlike 4.0 International (CC BY-SA 4.0) license.

Content TypeOriginal AuthorOriginal Content on Stackoverflow
QuestionAdamView Question on Stackoverflow
Solution 1 - JqueryRocket HazmatView Answer on Stackoverflow
Solution 2 - JqueryRichard DaltonView Answer on Stackoverflow
Solution 3 - JqueryAnurag M.View Answer on Stackoverflow
Solution 4 - JqueryDavid NealeView Answer on Stackoverflow
Solution 5 - JqueryJoseph MarikleView Answer on Stackoverflow