Develop Reference

Which selector will be used when $(this) is called from an event with multiple elements?

I have multiple selectors in a function with onclick event. And I want to update a global variable based on whichever one is clicked.
var sort = '';
$('#firstName, #lastName, #age, #yearLevel, #gender, #event, #year').onclick(function () {
sort = $(this).attr('id');
});
Will the $(this) use the value of the id which was clicked or all of them?
Question 2:
The ids are for <a>, can I use value attribute in <a>, instead of just getting the id name?

Use click instead of onclick.
var sort = '';
$('#firstName, #lastName, #age, #yearLevel, #gender, #event, #year').click(function ()
{
sort = $(this).attr('id');
});
See Plunker: http://plnkr.co/edit/4mEvS5UE7smOpMFw?open=lib%2Fscript.js

Jquery dynamic element selector

I know this question has been answered a lot, but when I applied this solution Event binding on dynamically created elements? the selector selects all the elements and retrieved only the first element
$('body').on('click','a.delete',function() {
var id = $('a.delete').attr('id');
var par = $('a.delete').closest('.foo');
console.log(id);
par.hide();
postDelete(id);
});
.foo is a parent element of a.delete
this code hides all elements with class .foo and delete the first element with class a.delete not the clicked one
How can I retrieve the ID of the element I clicked and hide its parent?

You should use this instead of a.delete in click event to get the reference of clicked a.delete like following.
$('body').on('click', 'a.delete', function () {
var id = $(this).attr('id'); //change here
var par = $(this).closest('.foo'); //change here
console.log(id);
par.hide();
postDelete(id);
})

Use this to get the clicked element.
From the docs, In addition to the event object, the event handling function also has access to the DOM element that the handler was bound to via the keyword this
$('body').on('click', 'a.delete', function() {
var id = $(this).attr('id');
var par = $(this).closest('.foo');
console.log(id);
par.hide();
postDelete(id);
});

JQuery - Get the ID attribute of li element

I have a pagination control who's <li> elements are dynamically set and assigned a ID. Using jQuery I am then attempting ti retrieve these set ID's
<div class="col-lg-12 text-center">
<ul class="pagination" id="pagHolder"></ul>
</div>
<script>
$(document).ready(function () {
//*****Logic for setting 'mainArrayHolder'*****
for(var i = 0; t < mainArrayHolder.length; i++)
{
$('#pagHolder').append('<li id="'+i+'">'+ i +'</li>');
}
});
</script>
The Issue I have is I am receiving an 'undefined' error when using the following function:
$(this).click(function(){
var id = $(this).attr("id");
alert(id);
});
I understand this is because 'this' is looking at the whole of the DOM rather than just the <li> elements. How do I set this code so it will get the id attribute of any of the <li> elements a user clicks?

You need to update the selector for your click event.
The following should work:
$('#pagHolder').on('click', 'li', function() {
alert( $(this).attr('id') );
});
Notice that we use the on() function, and delegate the event to any li which exists now (or in the future) as a child node of pagHolder.
Alternatively, you don't need to use jQuery's attr() function inside of the event handler, since this relates to the DOM node itself, you can access its properties directly, for example:
$('#pagHolder').on('click', 'li', function() {
alert( this.id );
});

You are appending li's to #pagHolder list, so you could get ids like this, for example:
$('#pagHolder').on('click', 'li', function() {
var id = this.id;
alert(id);
});

JQuery - Pass data to callback, from each element in a collection

In my HTML I have these links:
<a class="more-comments-link" id="more-comments-1135" href="#">Show More Comments</a>
<a class="more-comments-link" id="more-comments-4357" href="#">Show More Comments</a>
and so on.
Every link has same class and a unique ID.
In JQuery I do this:
var $el = $( "a.more-comments-link" );
Here I get a collection of all links.
I want to add click event to each element and get the ID from each element in a collection and pass it to callback.
I have tried this:
$el.click({id: $el.attr('id')}, tst);
tst is just a simple callback function with event parameter.
All this do is just gets the ID from first element in a collection.

Just do:
$el.click(tst);
Inside tst, this will be the target element, and you can use this.id to get its ID.

$el.click(tst);
function tst(e)
{
e.preventDefault();
var id = $(this).attr('id');
}

How about this:
function myFunction (id){
}
$("body").on('click', 'a.more-comments-link', function (){
var myId = $(this).attr('id');
myFunction(myId);
})

add all data attr from element in array

I need to add all of the data attributes in an array
$('.lightbox-trigger').click(function (e) {
e.preventDefault();
e.stopPropagation();
var image_src_arr = $('.lightbox-trigger').data('img-src');
console.log(image_src_arr);
});
http://jsfiddle.net/v7E5g/2/
but I get data attribute only the first element.
What's wrong? How can I make it work ?

You can use .map(), when you use .data() as a getter then it will return the value from the first object in the calling set of objects
$('.lightbox-trigger').click(function (e) {
e.preventDefault();
e.stopPropagation();
var image_src_arr = $('.lightbox-trigger').map(function () {
return $(this).data('img-src');
}).get()
console.log(image_src_arr);
});
Demo: Fiddle

You need to use $(this) to target current clicked div with class lightbox-trigger:
var image_src_arr = $(this).data('img-src');
Updated Fiddle
If you want to retrieve an array of src attribute then you can use .map():
var image_src_arr = $('.lightbox-trigger').map(function () {
return $(this).data('img-src');
}).get();
Updated Fiddle