如何查找列表 <li> 使用jquery的数字？

Question

我想找到用户点击的<li>的顺序。 例如，

<ul>
    <li id="li1">This is list one</li>
    <li id="li2">This is list Two</li>
    <li id="li3">This is list three</li>
</ul>

当用户点击列表项2时，我必须将该项的id检索为li2。 如何实现这一点，PLZ帮助

Answer 1

如下所述，有几种方法可以添加事件处理程序。 .bind是一个， .click另一个。 您还可以单独使用逻辑创建函数，并在绑定或单击事件附件时引用它。

<script type="text/javascript">
// version 1 with bind
  $(function(){
    $("li").bind("click", function(){alert(this.id);});
  })
</script>

<script type="text/javascript">
// version 2 with click and the separated method
  $(function(){
    $("li").click(listClickHandler);
  })
  function listClickHandler(){
    alert(this.id);
  }
</script>

在动态分配事件处理程序或在页面生命周期的不同点分配处理程序分配时，将处理程序方法与处理程序分配分开是很有意义的。 我经常使用bind然后单击的原因是bind可以用于很多不同的事件，所以很容易想象创建一个事件赋值工厂：

<script type="text/javascript">
// version 3, event assignment factory
  function assign(selector, event, method){
    $(selector).bind(event, method);
  }
  $(function(){
    assign(".menu li", "click", listClickHandler);
    assign(".menu li", "mouseover", listHoverHandler);
  })
  function listClickHandler(){...};
  function listHoverHandler(){...};
</script>

希望这比您需要的更多。

Answer 2

假设页面上只有这些li项，如果用户点击它，以下内容将提示li的id 。

<!-- on the side: you could leave out the type attribute, when using HTML5 -->
<script type="text/javascript" charset="utf-8">
    $(document).ready(function(){
        $("li").click(function(){
            alert($(this).attr("id"));
        });                   
    });
</script>

• 更多关于click ： http ： //api.jquery.com/click/
• 模式on attr ： http ： //api.jquery.com/attr/

Answer 3

加布里埃尔斯的回答是：

$("li").click(function(){
   alert($(this).attr('id'));
});

Answer 4

$('li').click(function(){
  alert(this.id);
}​);​

不需要额外的$()函数调用： this.id也可以。

Answer 5

你可能需要遍历你的清单。 我想你想根据它们相对于父ul的索引生成li id。 对？ 你可以使用以下代码

$("ul li").each(function(index, node){

      $(this).click(function(){                     
           alert("You clicked on li"+index);                
      });
 }); 

有关实例，请参见http://www.jsfiddle.net/w9qpj/1/ 。

对于获取特定li的索引，您可以使用jQuery索引函数http://api.jquery.com/index/ 。 或者使用其索引获取li，您可以使用jQuery eq函数http://api.jquery.com/eq/

$('ul li').eq(2).css('background-color', 'red'); 

上面的代码将使ul的3rd li元素的bacground颜色变为红色。