logo标签列表

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

javascriptjqueryhtmlanchorhref
3

我的锚点标签在表格行内，格式如下，其中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>

$(this).attr('href').match(/\d+$/)[0] - Tushar
1
@Tushar，你应该写一个真正的答案。请不要在评论中这样做。 - Soviut
4个回答
2
为了提取字符串末尾的数字，您可以使用正则表达式\d+$。\d+将匹配一个或多个数字，$-以锚定符号将匹配到行末。因此，这将匹配字符串末尾的数字。
$(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>

谢谢您指出我的错误，并提供一些关于 jQuery 选择器其他方面的细节。 - nam
1
你可以使用.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>

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/

我的错误。已经处理好了。 - Matt Spinks
1
使用正则表达式，您可以选择字符串的一部分。在 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>

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接