JavaScript/jQuery - 从元素id中获取整数

Question

从以下标记开始。

<div id="my-div">
    <a href="#" id="link-1">Somewhere</a>
    <a href="#" id="link-2">Somewhere else</a>
</div>

使用jQuery选择器和JavaScript有哪些选项可以获取id中的整数？

例如。

$("#my-div a").click(function(){
    $(this).id // ... somehow grab n from "link-n"        
    alert(n);
});

- jerome

Answer 1

您可以尝试以下方法：

var n = $(this).attr('id').match(/link-(\d+)/)[1];

这段代码获取了id属性，匹配模式为link-(\d+)（意思是以link-开头，后跟一个或多个数字），然后提取第一个子表达式匹配（括号中的部分\d+），这应该是您要查找的数字。

如果您需要将n作为整数而不是字符串处理，则应使用parseInt，并确保指定基数为10：

var n = parseInt($(this).attr('id').match(/link-(\d+)/)[1], 10);

如果你的id属性不能保证以link-开头，后面跟着一个或多个数字，并且你想捕获这种情况而不是抛出错误，那么你应该检查match的返回值：

var match = $(this).attr('id').match(/link-(\d+)/);
if (match) {
    var n = parseInt(match[1], 10);
    alert(n);
} else {
    // do something else if they don't match
}

- Brian Campbell

---

当然，修正后更加简洁。 - Brian Campbell

为什么你会选择这个而不是更简单的substr()函数呢？如果你假设前五个字符是link-，那么也可以假设它的最后一部分就是你要找的数字，不是吗？ - zombat

@zombat - 确实如此，但我宁愿在将其视为链接之前先断言我确实正在使用 'link-(\d+)'。 - gnarf

@zombat 因为它使您的代码更具自我记录性。对于稍后阅读您的代码的人来说，他们可能不知道您为什么要进行 substr 匹配，而正则表达式则清楚地显示了您要查找的内容。这也意味着，如果您以某种不同格式匹配了一个带有 id 的元素，它将失败；通常，在源头检测到错误并及早捕获错误比使用损坏的数据并在之后失败要好。 (tl;dr gnarf所说的) - Brian Campbell

@Brian-我不同意。 如果我在一个不以"link-"开头的元素上使用这行代码var n = parseInt($(this).attr('id').match(/link-(\d+)/)[1], 10);，它会产生错误并结束该函数中Javascript的处理。更好的方法是进行空匹配（例如对意外ID进行substr()），并检查匹配是否确实是int然后再使用它。 substr()比正则表达式简单得多，可以提高代码的可读性。 - zombat

Answer 2

只要之前的文本保持不变，您可以使用 substring 方法来获取数字。

$(this).attr('id').substring(5)

- Damien

---

.id 不起作用，我认为。您需要首先列出的 attr('id') 表单。 - Brian Campbell

正如gnarf所指出的那样，$(this).id无法工作。如果你在this周围使用jQuery对象，你必须使用attr()。 - zombat

另外，我认为你的意思是substring(5)而不是substring(6)。 - zombat

谢谢。我看到其他人用了 .id，我以为这是 jQuery 的功能，没想到我错了。感谢 Zombat，哈哈。Miscoutned。 - Damien

Answer 3

$(this).attr('id').replace('link-','')

- Antony Hatchkins

---

他正在询问如何在获取ID后解析它。 - Cfreak

这个是否返回“link-1”？ - o.k.w

这将返回ID。并不仅仅是所请求的数字部分。 - Kevin Peno

Answer 4

使用正则表达式将是您的最佳选择，例如：

// id contains '1' for id="link-1"
var id = parseInt(this.id.replace(/[^\d]/g, ''), 10);

- brad

---

如果ID以0开头，请使用parseInt（...，10）;来阻止八进制解析： parseInt('010') = 8...此外 - 在jQuery中，$(this).id将未定义 - 可尝试使用$(this).attr('id')。 - gnarf

或者，只需使用 this.id。没有必要将 jQuery 拖入所有事情中。 - bobince

@gnarf @bobince - 感谢您们的评论，我已经更新了答案以反映它们。 - brad

Answer 5

我通常会这样做：

$("#my-div a").click(function(){
    var match;
    if (match = $(this).attr('id').match(/link-(\d+)/)) {
      var number = parseInt(match[1],10);
      alert(number);
    }
});

- gnarf

---

使用正则表达式的'()'分组可以获得+1。你不需要'link-'，只需.match(/(\d+)/)就可以了。谁在乎前导文本呢？ - Jarrett Meyer

@Jarrett - 我宁愿确保它是一个 link-? 而不是仅仅说 "任何数字都可以工作"。这样，如果你有一个 <a id='rss-1'> 它将不会使用 link- 特定的代码。 - gnarf

Answer 6

var id = $(this).attr('id'),
    regex = /(\d+)/,
    matched = id.match( regex );

if ( matched ) {
    alert( matched[1] )
}

- meder omuraliev

---

我认为 && matched.length > 1 是不必要的，因为你正在使用 /(\d+)/，正则表达式无法在没有捕获任何内容的情况下匹配。 - gnarf

Answer 7

$(this).attr('id').split('-')[1];

- Brian Schantz

---

难以置信这么久才得到基于分割的答案。+1 - Kenan Banks

Answer 8

如果你知道所有的ID都以“link-”为前缀，你可以简单地获取ID的子字符串：

$("#my-div a").click(function(){
   alert(this.id.substr(5));
});

- zombat

---

使用$(this).attr('id')代替$(this).id。 - gnarf

罗杰，谢谢。复制粘贴有点快了。我实际上只会用 this.id。 - zombat

Answer 9

这应该是最简单的方法：

var id = this.id.replace(/[^\d]/g,'')*1;

它将ID属性中的任何数字作为number返回（*1进行转换，类似于parseInt）。在您的示例中：

$("#my-div a").click(function(){
    var n = this.id.replace(/[^\d]/g,'')*1;
    alert(n);  // alerts any number in the ID attribute
    alert(typeof n) // alerts 'number' (not 'string')
});

- David Hellsing

Answer 10

你可以使用正则表达式来解析出数字：

var match = /link-(\d+)/.exec($(this).attr('id'));
var num = match[1];

- Mara Morton