Question

我在一个Javascript库中工作，它为一件事带来了jQuery：一个“以...结尾”选择器。它看起来像这样：

$('[id$=foo]')

它会找到id以“foo”结尾的元素。

我希望在没有jQuery（直接JavaScript）的情况下这样做。你怎么能这样做？我也希望它尽可能高效。

Answer 1

使用querySelectorAll，not available in all browsers (like IE 5/6/7/8) though。它基本上像jQuery一样工作：

http://jsfiddle.net/BBaFa/2/

console.log(document.querySelectorAll("[id$=foo]"));

Answer 2

您需要遍历页面上的所有元素，然后使用字符串函数对其进行测试。我能想到的唯一优化是改变起点 - 即不是document.body，而是你知道你的元素将是其子元素的其他元素 - 或者你可以使用document.getElementsByTagName()来获取元素列表你知道元素的标签名称。

但是，如果您可以使用某些第三方JavaScript，例如，您的任务将更容易Sizzle（4k缩小，jQuery使用相同的选择器引擎）。

Answer 3

所以，使用所说的一切，我把这段代码放在一起。假设我的元素都是input s，那么下面的代码可能是我最好的代码？

String.prototype.endsWith = function(suffix) {
    return this.indexOf(suffix, this.length - suffix.length) !== -1;
};

function getInputsThatEndWith(text) {

    var result = new Array();
    var inputs = document.getElementsByTagName("input");

    for(var i=0; i < inputs.length; i++) {
        if(inputs[i].id.endsWith(text))
            result.push(inputs[i]);
    }

    return result;
}

我把它放在JsFiddle上：http://jsfiddle.net/MF29n/1/

Answer 4

@ThiefMaster谈到了如何进行检查，但这是实际的代码：

function idEndsWith(str)
{ 
  if (document.querySelectorAll)
  {
    return document.querySelectorAll('[id$="'+str+'"]');
  }
  else
  {
    var all,
      elements = [],
      i,
      len,
      regex;

    all = document.getElementsByTagName('*');
    len = all.length;
    regex = new RegExp(str+'$');
    for (i = 0; i < len; i++)
    {
      if (regex.test(all[i].id))
      {
        elements.push(all[i]);
      }
    }
    return elements;
  }
}

这可以通过多种方式得到增强。它目前遍历整个 dom，但如果它有上下文会更有效：

function idEndsWith(str, context)
{
  if (!context)
  {
    context = document;
  }
  ...CODE... //replace all occurrences of "document" with "context"
}

此函数中的str变量没有验证/转义，假设它只会收到一串字符。

Answer 5

对your answer的建议更改：

RegExp.quote = function(str) {
     return str.replace(/([.?*+^$[\]\\(){}-])/g, "\\$1");
}; // from https://stackoverflow.com/questions/494035/#494122

String.prototype.endsWith = function(suffix) {
    return !!this.match(new RegExp(RegExp.quote(suffix) + '$'));
};

function getInputsThatEndWith(text) {

    var results = [],
        inputs = document.getElementsByTagName("input"),
        numInputs = inputs.length,
        input;

    for(var i=0; i < numInputs; i++) {
        var input = inputs[i];
        if(input.id.endsWith(text)) results.push(input);
    }

    return results;
}

http://jsfiddle.net/mattball/yJjDV/

使用正则表达式而不是String.endsWith实现indexOf()主要是一个偏好问题，但我认为值得包括多样性。如果您不关心在后缀中转义特殊字符，可以删除RegExp.quote()位，然后使用
new RegExp(suffix + '$')。

Answer 6

如果您知道要定位的DOM元素的类型，然后使用getElementsByTagName获取对它们的引用列表，然后迭代它们。

您可以使用此优化来加快迭代：

忽略没有id的元素。
定位您想要搜索的最近的已知元素父级，假设您的元素位于id ='myContainer'的div中，然后您可以使用 document.getElementById('myContainer').getElementsByTagName('*')，然后迭代它们。

ID结束于纯Javascript

6 个答案: