SO - 29384371

by Arun P Johny

HTML

<ul id="list">
    <li id="item-1">First</li>
    <li id="item-2">Second</li>
    <li id="item-3">Third</li>
</ul>

CSS

.red {
    color: #cc3333;
}

JavaScript

$(document).ready(function () {
    var fns = [displayId, displayNode, displayNodevalue]
    $("ul").children().click(function (e) {
        var indexItem = $(this).index();
        fns[indexItem] ? fns[indexItem](e) : '';
    });
})

function displayId(event) {
    // below returns undefined not what I want
    // var $listID = jQuery(this).attr("id"); 
    var $listID = event.target.id;
    alert($listID);
}

function displayNode(event) {
    var listNodename = event.target.nodeName;
    alert(listNodename);
}

function displayNodevalue(event) {
    var listValue = event.target.textContent;
    alert(listValue);
}