迭代元素,向每个元素添加click事件

时间:2013-08-24 18:44:29

标签: javascript jquery click each

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。现在我只是对我正在使用的索引发出警报(并且它也没有工作),但我真的想要我正在使用的项目的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
  });

1 个答案:

答案 0 :(得分:7)

这应该有效:

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

幕后花絮jQuery做了很多魔法并且基本上绑定了你传递给元素的函数。因此this引用您单击的元素并将其传递给jQuery函数:$(this)将返回包含在jQuery对象中的元素。当然,您只需直接访问id上的this即可。