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

Question

我的锚标签位于 table 行中，格式如下，其中 url 末尾的数字可以是任何数字 1、9、100、1049 等。

单击锚点时如何获取 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

首先，您需要在查询选择器中将标记说明符括起来。您甚至可以将查询选择器更改为单个字符串（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

使用正则表达式，您可以 select 字符串的一部分。将 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() 将匹配数字和 return 数组。要从数组的第零个索引处获取数字，请使用 [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') 将 return 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>

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

How to get the number at the end of the url of an anchor using jquery?

html

javascript

anchor

jquery

href