Question

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

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

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

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 1

要提取字符串末尾的数字，您可以使用RegEx \d+$。 \d+将匹配一个或多个数字，$ - 以锚结束将使匹配位于行尾。因此，这将匹配字符串末尾的数字。

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

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

代码中存在一些问题

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

由于我没有在给出的代码中定义table和a变量，因此我假设您正在尝试将它们用作选择器。{{ 1}}应为$(table)，$('table')应为a。

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

锚定点击将重定向到给定的网址。要停止此操作，您可以使用value或在事件处理程序的末尾添加event.preventDefault()。

＆＃13;

return false

＆＃13;

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

＆＃13;

Answer 2

首先，您需要在查询选择器中的标记说明符周围加上引号。您甚至可以将查询选择器更改为单个字符串（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 3

您可以使用.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 4

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

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

＆＃13;

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

＆＃13;

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

＆＃13;

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

4 个答案: