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

My anchor tags inside a table row and are of the following form where the numbers at the end of the url can be any numer 1,9,100, 1049,... etc.

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

How can I get the number at the end of the url when an anchor is clicked? I can't even get the following to work.:

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

4 个解决方案

#1

To extract the digits at the end of the string, you can use RegEx \d+$. \d+ will match one or more digits and $-ends with anchor will make the match at the end of line. So, this will match the number at the end of string.

要提取字符串末尾的数字,可以使用RegEx \ d + $。 \ d +将匹配一个或多个数字,$ -ends与锚点将匹配在行尾。所以,这将匹配字符串末尾的数字。

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

match() will match the number and return an array. To get the number from zeroth index of array [0] is used. As suggested in other answers this.href can also be used to get the value of href attribute of the clicked element. Note that this inside event handler refer to the element on which event has occurred.

match()将匹配数字并返回一个数组。从数组[0]的第0个索引获取数字。如其他答案所示,this.href也可用于获取被点击元素的href属性值。请注意,此内部事件处理程序引用发生事件的元素。

There are some issues in the code

代码中存在一些问题

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

As I don't see table and a variables defined in the code given, I'm assuming that you're trying to use them as selectors.$(table) should be $('table') and a should be $('a').

由于我没有看到表和给定代码中定义的变量,我假设您正在尝试将它们用作选择器。$(table)应该是$('table')而a应该是$('一个')。

$(this).attr('href') will return the value of href attribute. So, there is no need to call val() on it. val() is used to get the element value(i.e. the value of value attribute on element).

$(this).attr('href')将返回href属性的值。所以,没有必要在上面调用val()。 val()用于获取元素值(即元素上value属性的值)。

The anchor click will redirect to the given URL. To stop this, you can use event.preventDefault() or add return false at the end of the event handler.

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

#2

You can use .slice(), .lastIndexOf(). Note, if a is not defined, missing quoutes surrounding selector "a" at delegated event.

您可以使用.slice(),. lastIndexOf()。注意,如果未定义a,则在委派的事件中丢失围绕选择器“a”的quoutes。

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

#3

First you will want to put quotes around your tag specifiers in your query selectors. You might even change your query selector to be a single string (table a instead of table, a):

首先,您需要在查询选择器中的标记说明符周围加上引号。您甚至可以将查询选择器更改为单个字符串(表a而不是表,a):

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

Second, use the split function to convert the url string to an array based on the character "/":

其次,使用split函数将url字符串转换为基于字符“/”的数组:

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

Working example: https://jsfiddle.net/mspinks/088f8z8b/3/

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

#4

Using regex, you can select a part of string. Write your regex in String.prototype.match() to run it and get result.

使用正则表达式,您可以选择字符串的一部分。在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>

#1