javascript - 如何使用 jquery 获取 anchor url 末尾的数字？

Question

我的 anchor 标记位于表格行中，并且具有以下形式，其中 url 末尾的数字可以是任何数字 1,9,100、1049 等。

单击 anchor 时，如何获取 url 末尾的数字？我什至无法让以下工作。:

$('table').on('click', 'a', function (event) {
  alert($(this).attr('href').val());
});

$('table').on('click', 'a', function (event) {
  alert($(this).attr('href').val());
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
  <tr>
    <td>
      <a href="/ControllerName/ActionName/1">Order Detail</a>
    </td>
  </tr>
  <tr>
    <td>
      <a href="/ControllerName/ActionName/2">Order Detail</a>
    </td>
  </tr>
  ...
  ...
  <tr>
    <td>
      <a href="/ControllerName/ActionName/100">Order Detail</a>
    </td>
  </tr>
  ...
  ...
  <tr>
    <td>
      <a href="/ControllerName/ActionName/149">Order Detail</a>
    </td>
  </tr>
  ...
  ...
</table>

Answer 1

要提取字符串末尾的数字，可以使用 RegEx \d+$。 \d+ 将匹配一位或多位数字，而 $-ends with anchor 将匹配行尾。因此，这将匹配字符串末尾的数字。

$(this).attr('href').match(/\d+$/)[0]

match() 将匹配数字并返回一个数组。要从数组的第零个索引获取数字，使用 [0]。正如其他答案中所建议的那样， this.href 也可用于获取被单击元素的 href 属性的值。请注意，事件处理程序中的 this 指的是发生事件的元素。

---

代码中有一些问题

$(table).on('click', a , function (event) {
   alert($(this).attr('href').val());
});

因为我没有在给定的代码中看到定义的 table 和 a 变量，所以我假设您正在尝试将它们用作选择器。$(table) 应该是 $('table') 而 a 应该是 $('a')。

$(this).attr('href') 将返回 href 属性的值。因此，无需对其调用 val()。 val() 用于获取元素值(即元素上的 value 属性的值)。

anchor 击将重定向到给定的 URL。要停止这种情况，您可以使用 event.preventDefault() 或在事件处理程序的末尾添加 return false。

$('table').on('click', 'a', function(e) {
  console.log(this.href.match(/\d+$/)[0]);
  
  e.preventDefault();
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
  <tr>
    <td>
      <a href="/ControllerName/ActionName/1">Order Detail</a>
    </td>
  </tr>
  <tr>
    <td>
      <a href="/ControllerName/ActionName/2">Order Detail</a>
    </td>
  </tr>
  <tr>
    <td>
      <a href="/ControllerName/ActionName/100">Order Detail</a>
    </td>
  </tr>
  <tr>
    <td>
      <a href="/ControllerName/ActionName/149">Order Detail</a>
    </td>
  </tr>
</table>