ID заканчивается в чистом Javascript

Question

Я работаю в библиотеке Javascript, которая включает в себя jQuery с одной стороны: селектор «заканчивается». Это выглядит так:

$('[id$=foo]')

Он найдет элементы, в которых id оканчивается на "foo".

Я хочу сделать это без jQuery (прямой JavaScript). Как вы могли бы пойти по этому поводу? Я также хотел бы, чтобы он был максимально эффективным.

Answer 1

Использование querySelectorAll, доступно не во всех браузерах (например, IE 5/6/7/8), хотя В основном это работает как jQuery:

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

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

Answer 2

Предлагаемые изменения ваш ответ :

RegExp.quote = function(str) {
     return str.replace(/([.?*+^$[\]\\(){}-])/g, "\\$1");
}; // from /349222/kak-vy-ispolzuete-peremennuy-v-regulyarnom-vyrazhenii#349232

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 3

@ 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 4

Итак, используя все, что было сказано, я собрал этот код. Если предположить, что все мои элементы 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 5

Вам нужно будет перебрать все элементы на странице, а затем использовать строковые функции для проверки.Единственная оптимизация, о которой я могу подумать, - это изменение начальной точки - т.е. не document.body, а какого-то другого элемента, в котором вы знаете, что ваш элемент будет дочерним, - или вы можете использовать document.getElementsByTagName(), чтобы получить список элементов, если вы знаете тегназвание элементов.

Однако ваша задача была бы намного проще, если бы вы могли использовать сторонний javascript, например, Sizzle (4k минимизировано, то же самое)механизм выбора, который использует jQuery).

Answer 6

Если вы знаете тип элементов DOM, на которые вы нацеливаетесь, то получите список ссылок на них, используя getElementsByTagName, а затем выполните итерации по ним.

Эту оптимизацию можно использовать для ускорения итераций:

• игнорировать элементы, не имеющие идентификатора.

• нацелить ближайший известный родительский элемент элементов, которые вы хотите найти, скажем, ваш элемент находится внутриdiv с id = 'myContainer', затем вы можете получить ограниченное подмножество, используя document.getElementById('myContainer').getElementsByTagName('*'), а затем выполнить итерации по ним.