Итерация через элементы, добавление события клика к каждому из них

Question

jQuery новичок здесь.

Если у меня есть этот HTML:

<ul id="floor-selector"> 
    <li id="floor-1">Ground Floor</li> 
    <li id="floor-2">Second Floor</li> 
    <li id="floor-3">Third Floor</li> 
    <li id="floor-4">Premier Floor (Premier Floor)</li> 
</ul> 

Я хочу, чтобы добавить событие click к каждому li элемента, так что я могу получить id элемента я на. Прямо сейчас у меня есть предупреждение с индексом, в котором я включен (и он тоже не работает), но мне действительно нужен идентификатор элемента, в котором я включен, а не индекс массива, возвращаемый моим селектором.

Вот что я пытался, но это не похоже на работу, я думаю, что, возможно, неправильное понимание each() или click().

$('#floor-selector li').each(function(index, node) { 
    node.click(function(){ alert('I am on the '+index+'th element'); }); 
    // but I really want to get the ID of this element 
    }); 

Answer 1

Это должно работать:

$('#floor-selector li').on('click', function() { 
    alert('I am the '+$(this).attr('id')+' element'); 
}); 

За кулисами JQuery делает кучу магии и, по существу связывает функцию вы передаете к элементу. this поэтому ссылается на элемент, который вы нажимаете, и передавая его в jQuery functio: $(this) возвращает вам этот элемент, завернутый в объект jQuery. Конечно, вы можете просто получить доступ к id по адресу this.