通过 getElementsByTagName 为 HTML 选择元素使用 indexOf

Question

正在尝试从数组中删除选择中显示的项目。这是 JSFiddle

var allProbs = []; // This is defined elsewhere
var dropProbs = [];
var j;
var sel = document.getElementsByTagName("select")
var selarray = Array.prototype.slice.call(sel); // Convert nodelist to array
for (j = 0; j < allProbs.length; j++) {
    alert(allProbs[j] + " " + selarray.indexOf(allProbs[j]) ); // all -1 here???
    if (selarray.indexOf(allProbs[j]) == -1) {
        dropProbs[dropProbs.length] = allProbs[j]
    }
}

Answer 1

Array.prototype.indexOf 在对要比较的值调用 toString 之后执行严格相等。您正在处理主机 (DOM) 对象，调用它们的 toString 方法（如果它们有一个）的结果取决于实现。

你试过了吗：

console.log(typeof selarray[j].toString);

如果结果是函数，调用它可能return类似于：

"[object HTMLSelectElement]"

或

"object"

或者浏览器开发者认为好的其他任何东西。但是对于 selarray.

的每个成员，它可能 return 具有相同的值

你没有显示 allProbs 的值是什么，但是除非它们是任何 selarray[j].toString() return 的精确字符串匹配，否则你'会得到 -1，如果匹配，你总是会得到 0（即第一个）。

编辑

因此，基于 allProbs 中的值是字符串，您将永远无法匹配，因为您正在有效地寻找 where:

allProbs[i] === selarray[j].toString();

其中 selarray[j].toString() 总是 returns 上面的值之一（或其他）。

您可以使用 Array.prototype.findIndex (new method in ECMAScript 2015 so a polyfill 可能需要），这类似于 indexOf 但使用函数来确定匹配。

大概您正在尝试查找 select 元素，其值等于 allProbs 的成员，因此您可能需要类似的东西：

var index;
for (var j = 0; j < allProbs.length; j++) {
  index = selarray.findIndex(function(sel) {
    return sel.value == allProbs[j];
  })

  /* do stuff based on value of index */

}

这是一个工作示例：

// Polyfill for Array.prototype.findIndex
if (!Array.prototype.findIndex) {
  Array.prototype.findIndex = function(predicate) {
    if (this === null) {
      throw new TypeError('Array.prototype.findIndex called on null or undefined');
    }
    if (typeof predicate !== 'function') {
      throw new TypeError('predicate must be a function');
    }
    var list = Object(this);
    var length = list.length >>> 0;
    var thisArg = arguments[1];
    var value;

    for (var i = 0; i < length; i++) {
      value = list[i];
      if (predicate.call(thisArg, value, i, list)) {
        return i;
      }
    }
    return -1;
  };
}

var allProbs = ["aaa","bbb","ccc"];
var dropProbs = [];
var sel = document.getElementsByTagName("select");
var selarray = Array.prototype.slice.call(sel);

for (var index, j = 0; j < allProbs.length; j++) {

    index = selarray.findIndex(function(sel){
      return sel.value == allProbs[j]
    });


    if (index == -1) {
        dropProbs[dropProbs.length] = allProbs[j];
    }
}
document.write('<br>dropProbs: ' + JSON.stringify(dropProbs));

    <select id="sel">
        <option value="aaa" selected>aaa</option>
    </select>

通过 getElementsByTagName 为 HTML 选择元素使用 indexOf

Using indexOf for HTML selection elements via getElementsByTagName

javascript

dom

indexof

getelementsbytagname

编辑