Question

我正在使用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

Answer 1

你拥有的不是数组，而是nodeList。

nodeList有length，并且类似于数组，但indexOf，forEach等数组方法不适用于nodeLists。

您可以将nodeList转换为这样的数组

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

但在你的情况下你真的不应该，你应该坚持迭代。

Answer 2

迭代这些元素确实是一个选项，但如果您不喜欢它，根据您的设置，您可能还有2个选项：

以下代码需要map函数（检查compatibility here，它基本上需要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);

Answer 3

使用ES6传播运营商

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

这内部用作

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

在svg文本元素数组上使用javascript＆＃f; indexOf

3 个答案: