如何使用 jquery 获取锚点 url 末尾的数字？

Question

我在表格行中的锚标记，格式如下，其中 url 末尾的数字可以是任何数字 1,9,100, 1049,...等。

点击锚点时如何获取网址末尾的数字？我什至无法让以下工作。：

$('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

首先，您需要在查询选择器中的标记说明符周围加上引号。您甚至可以将查询选择器更改为单个字符串（table a 而不是 table、a）：

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

其次，使用split函数将url字符串转换为基于字符"/"的数组：

$('a').on('click', function (event) {
   var words = $(this).attr('href').split('/');
   alert(words[words.length-1]);
});

工作示例：https://jsfiddle.net/mspinks/088f8z8b/3/

Answer 2

您可以使用.slice()、.lastIndexOf()。请注意，如果未定义 a，则在委托事件中缺少围绕选择器 "a" 的引号。

$("table").on("click", "a", function(event) {
  event.preventDefault();
  alert(this.href.slice(this.href.lastIndexOf("/") + 1));
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js">
</script>
<table>
  <tbody>
    <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>
  </tbody>
</table>

Answer 3

使用正则表达式，您可以选择字符串的一部分。将您的正则表达式写入String.prototype.match() 以运行它并获得结果。

$("table").on('click', "a", function(event){
  alert(this.href.match(/\d+$/)[0]);
});

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

<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 4

要提取字符串末尾的数字，您可以使用 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 属性的值）。

锚点点击将重定向到给定的 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>