Fiddle Demo

Get element on which currently-called jQuery event handler is attached -- http://jquerytipsntricks.wordpress.com/

by Akram kamal

HTML

<h3>Get element on which currently-called jQuery event handler is attached</h3>

<hr/>
<span>Click on the list items to see the effect.</span>

<br/>
<div id="container">
    <ul id="list1">
        <li><span>Item Number One</span></li>
        <li><span>Item Number Two</span></li>
        <li><span>Item Number Three</span></li>
    </ul>
    <ul id="list2">
        <li><span>Item Number Four</span></li>
        <li><span>Item Number Five</span></li>
        <li><span>Item Number Six</span></li>
    </ul>
</div>
<footer>
    <p><a href="http://jquerytipsntricks.wordpress.com/" target="_blank">jQuery Tips n Tricks</a> 2013</p>
</footer>

CSS

/** Style for the body **/
 body {
    font: 12px'lucida grande', Tahoma, Verdana, Arial, Sans-Serif;
}
/* Style for the list */
 #container ul {
    border:1px solid #333;
    padding-top:10px;
    padding-bottom:10px;
    -moz-border-radius: 8px;
    -webkit-border-radius: 8px;
    border-radius: 8px;
    -khtml-border-radius: 8px;
    list-style: none;
    margin: 20px 0;
}
#container li {
    padding: 4px;
}
#container span {
    cursor: pointer;
    color: #7A7A7A;
    letter-spacing:0.14em;
}
#container span:hover {
    color: #000;
}
.lightCyan {
    background-color: LightCyan;
}
.lightCyan span {
    color: #369;
}
.lightGreen {
    background-color: LightGreen;
}
.lightGreen span {
    color: #369;
}
/** Style for hr & h1 **/
 hr {
    margin-bottom:30px;
}
h3 {
    color:#369;
}
footer {
    position:fixed;
    left:0;
    bottom:0;
    width:100%;
    background:#ccc;
    padding-left:10px;
}

JavaScript

// Bind the click event, to the span elements
$('#list1, #list2').on('click', 'span', function (event) {

    // Get the target of delegation
    var $list = $(event.delegateTarget);

    // Get the id of the list
    var listId = $list.prop('id');

    // Process the class
    if (listId === 'list1') {
        $list.toggleClass('lightCyan');
    } else if (listId === 'list2') {
        $list.toggleClass('lightGreen');
    }
});