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。如何实现这一点，请帮助

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项，如果用户点击它，以下内容会提醒id li。

<!-- 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/
模式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

您可能需要遍历您的li列表。我想你想根据它们相对于父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颜色为红色。

如何使用jquery找到列表<li>数字？</li>

5 个答案: