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()  
});

但更好的方法是IMHO而不是使用正则表达式来解析网址是使用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不能以数字开头。

Answer 2

不需要ID，请使用$(this);）

例如：

$("li").click(function(){
  $(this).//do ajax stuff
});

如果你想获得点击元素的href：$(this).children('a').attr('href')

Answer 3

您可以像这样获取id的{{1}}属性：

<a>

Answer 4

获取id首先为你的li分配id然后尝试这个...

$('li').click(function(){

      $(this).attr('id') ;
});

Answer 5

有点迟了但你不能这么做：

$(function() {
    $('ul li').each(function() {
        $('a', this).click(function(e) {
            e.preventDefault();
            var href = $(this).attr('href');
            $('#somediv').load(href);
        });
    });
});

如何使用jquery识别li项目

5 个答案: