如何使用jquery识别li项目

Question

我有一份清单

<ul>
  <li><a href="?page=4">one</li>    //no 4
  <li><a href="?page=7">two</li>    //no 7
  <li><a href="?page=14">three</li>  //no 14
  <li><a href="?page=72">four</li>   //no 72
  <li><a href="?page=201">five</li>   //no 201
</ul>

现在我想使用ajax来加载页面而不是正常的页面加载.那么如何检测用户使用jQuery点击的链接.说点像

$('id of the element clicked').click(function()({ 
      // Load the page using .ajax() 
});

在上面的jQuery代码中,我该怎么做id of the element clicked？

Answer 1

您可以href使用正则表达式从单击的锚点的属性中获取id :

$('ul a').click(function() {
    var id = this.href.match(/([0-9]+)$/)[1];
    // Load the page using .ajax()  
});

但更好的方法是恕我直言,而不是使用正则表达式解析网址是使用HTML5 data-*属性:

<ul>
  <li><a href="?page=4" data-id="4">one</li>
  <li><a href="?page=7" data-id="7">two</li>
  <li><a href="?page=14" data-id="14">three</li>
  <li><a href="?page=72" data-id="72">four</li>
  <li><a href="?page=201" data-id="201">five</li>
</ul>

然后:

$('ul a').click(function() {
    var id = $(this).data('id');
    // Load the page using .ajax()  
});

其他一些答案建议使用id属性,但添加id="4"到锚点将是无效标记,因为根据规范,DOM元素的id不能以数字开头.