JavaScript 执行 for 循环但只看到数组中最后一个元素的结果

Question

我正在尝试为 devtools 编写一个 js 片段，它将自动在一些输入标签中添加一些信息。

我做了什么：

var labels = [
    "navigationStart",
    "unloadEventStart",
    "unloadEventEnd"];

var newRuleXpath = "//div[@class='btn-group dropdown']/button[@class='btn btn-primary']";
var formControlClass = "form-control ng-pristine ng-untouched ng-empty ng-invalid ng-invalid-required";

String.format = function() {
      var s = arguments[0];
      for (var x = 0; x < arguments.length - 1; x++) {       
          var reg = new RegExp("\{" + x + "\}", "gm");             
          s = s.replace(reg, arguments[x + 1]);
      }
      return s;
  }


function getElementByXpath(path) {
  return document.evaluate(path, document, null, XPathResult.FIRST_ORDERED_NODE_TYPE, null).singleNodeValue;
}

function wait(ms){
   var start = new Date().getTime();
   var end = start;
   while(end < start + ms) {
     end = new Date().getTime();
  }
}

function addRule(rule) {
        var resource = rule.startsWith("resources");

        if (resource == true){
            var regexp = String.format("<span id='customextraction-{0}'>((?:[0-9]|.)*?)</span>", rule); 
        }

        else {
            var regexp = String.format("<span id='customextraction-perftimings-{0}'>((?:[0-9]|.)*?)</span>", rule); 
        }
        
        getElementByXpath(newRuleXpath).click();

        var elems = document.getElementsByClassName(formControlClass)
    
        elems[0].value = rule
        
        elems[1].value = regexp
}

for (var i = 0; i < labels.length; i++){
    let rule = labels[i]
    addRule(rule)
    wait(500)
}

所以，代码工作正常，但它只影响标签数组的最后一个元素。

有什么想法吗？

Answer 1

它并不是只影响数组中的最后一个元素。只是它最后影响了最后一个元素。你写

var elems = document.getElementsByClassName(formControlClass)
elems[0].value = rule    
elems[1].value = regexp

所以每次循环迭代时，它都会获取那组元素，并应用相同的元素（前两个，如您指定的那样获取 [0] 和 [1]），然后应用你的规则。循环的每次迭代都会覆盖最后一次，因为您每次都引用相同的 DOM 节点。

JavaScript 执行 for 循环但只看到数组中最后一个元素的结果

JavaScript execute for loop but only see results for last element in array

javascript

google-chrome-devtools