javascript - 查找具有特定字符串的 id

Question

我正在尝试学习 JavaScript，并且想将我正在研究的内容更改为纯 JavaScript 解决方案。如何将其更改为 JavaScript：

var hrefs = $("a[id^=a_l_]").map(function() {
  return this.href;
}).get();

它基本上找到所有包含“a_l_”的id并将其放入一个数组中。

这是我尝试过的

var matches = [];
var elems = document.getElementsByTagName("a");
for (var i=0; i<elems.length; i++) {
  if (elems[i].id.indexOf("a_l_") == 0)
  matches.push(elems[i]);
  console.log(matches);
}

Answer 1

始终使用括号{}表示条件！否则迟早你会犯错！

for (var i=0; i<elems.length; i++) {
    if (elems[i].id.indexOf("a_l_") == 0) { // <-- {
        matches.push(elems[i]);
        console.log(matches);
    }                                       // <-- }
}

Answer 2

你可以先做一个过滤器，然后做一个地图。

var hrefs = Array.prototype.filter.call(document.getElementsByTagName("a"), function(node) { 
  return node.id.indexOf("a_l_") === 0;
}).map(function(node) {
  return node.href;
});

Answer 3

您正在尝试查找 id 等于“a_l_”的所有元素并将它们添加到数组中。我建议您的 html 元素不应使用相同的 id。你应该让他们上课。无论如何，试试这个：

var matches = [];
var elems = document.getElementsByTagName("a");
for(var i=0; i<elems.length; i++) {
  if(elems[i].id.indexOf("a_l_") != -1) {
    matches.push(elems[i]);
    console.log(matches);
  }
}

Answer 4

假设 ES5 数组方法（如果不存在则使用 shim / polyfill）

var hrefs = [].filter.call(document.getElementsByTagName('a'), function(el) {
    return el.id.indexOf('a_l_') === 0;
}).map(function(el) {
    return el.href;
});

在http://jsfiddle.net/alnitak/Zu3dJ/工作演示

Answer 5

纯 Javascript 的替代解决方案，适用于现代浏览器（IE8+包括）

var elems = document.querySelectorAll("a[id^='a_l_']");

elems是一个以 开头的<a>元素的集合。Indeed速度较慢，但​​可读性大大提高ida_l_querySelectorAll