Использование javascript indexOf для массива текстовых элементов svg

Я работаю с файлом svg, в котором есть несколько текстовых элементов. Все текстовые элементы являются числами. Я могу получить список значений и поместить их в массив с помощью следующей строки кода.

var fretdata = document.getElementById("fretinformation").getElementsByTagName("text");

Я могу получить доступ к свойству .length, а также получить доступ к элементам массива по индексу, например [0].textContent. Однако, когда я пытаюсь использовать функцию .indexOf() для массива, я получаю сообщение об ошибке, что объект (мой массив) не поддерживает свойство или метод indexOf.

Я могу настроить цикл for для итерации по массиву, проверяя каждое значение в поисках наличия или отсутствия определенного значения. Я хотел бы что-то с простотой функциональности indexOf, которая сообщает мне, присутствует ли что-то в массиве и где оно находится, если оно присутствует. Есть ли способ заставить .indexOf() работать с массивом текстовых элементов svg? Или есть аналогичная альтернатива, не требующая использования циклов и флагов?

Я думаю, проблема заключается в том, что у меня есть массив текстовых элементов, а не массив строк. Но я не уверен, как напрямую получить массив текстового элемента textContent

var fretdata = document.getElementById("fretinformation").getElementsByTagName("text");
  //var fretdata = document.getElementById("fretinformation").getElementsByTagName("text").textcontent;

  //18th fret is the upper fret limit
  //0 fret (open string) is the lower fret limit

  //var zerolocation=fretdata.indexOf("0");
for (fd=0;fd<fretdata.length;fd++){
      if(fretdata[fd].textContent=="0"){
          document.getElementById("downkey").setAttribute("onclick",null);
          document.getElementById("downkey").getElementsByTagName("polygon")[0].style.fill="#D3D3D3";
      }
}

Итерация в цикле работает. Две строки, закомментированные с помощью .indexOf, этого не делают. Спасибо, --Christopher


javascript svg arrays indexof
person Christopher Gaston    schedule 22.05.2014    source источник

Ответы (3)


arrow_upward
1
arrow_downward

Повторение элементов действительно вариант, но если вам это не нравится, у вас могут быть еще 2 варианта в зависимости от вашей настройки:

Для следующего кода требуется функция map (проверьте совместимость здесь в основном требуется IE9+) и совместимость с функциями среза (то же самое, IE9+).

var fretdata = document.getElementById("fretinformation").getElementsByTagName("text");
alert([].slice.call(fretdata).map(function(o) { return o.textContent; }).indexOf("1"));

Другой требует jQuery, он обрабатывает много вещей за вас.

alert($( "#fretinformation > text" ).filter(function() { return $(this).text() === "1"; } ).length);
person dereli    schedule 22.05.2014

arrow_upward
2
arrow_downward

У вас есть не массив, это nodeList.

Список узлов имеет length и подобен массиву, но методы массива, такие как indexOf, forEach и т. д., не работают с узлами.

Вы можете преобразовать nodeList в такой массив

var array = Array.prototype.slice.call(fretdata);

но в вашем случае вы действительно не должны, вместо этого вы должны придерживаться итерации.

person adeneo    schedule 22.05.2014
comment
Спасибо. В итоге я выполнил итерацию один раз и поместил каждое значение textContent в массив, чтобы я мог использовать indexOf, чтобы легко определить, не было ли значения в массиве. - person Christopher Gaston; 22.05.2014

arrow_upward
0
arrow_downward

использовать операторы распространения ES6

var fretdata = [...(document.getElementById("fretinformation").getElementsByTagName("text"))]

Это внутренне работает как

var array = Array.prototype.slice.call(fretdata);
person BoltCoder    schedule 29.05.2018