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 () {
    $("ul").children().each(function (i) {
        $(this).click(function (e) {
            var indexItem = i;

            if (indexItem == 0) {
                displayId(e);
            }
            if (indexItem == 1) {
                displayNode(e);
            }
            if (indexItem == 2) {
                displayNodevalue();
            }
        });
    });
})

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.nodeValue;
    alert(listValue);
}