Question

我想用当前DOM中的div元素替换img-replace个元素img元素。但问题是，我只有两个带有img-replace类的div元素，而img元素的数量为三个。

我的循环必须用div替换元素img，以及在images.length > divs.length时停止函数的条件。但它不会发生，而且我的循环也不起作用（在浏览器中它可以使用随机替换结果）。

我会感激任何帮助。

P.S。 div和img元素的数量可以是随机的，因此我们需要动态自适应函数。

＆＃13;

function onLoad() {
  var images = document.body.getElementsByTagName('img');
  var divs = document.body.getElementsByClassName('img-replace');

  for (let i = 0; i < images.length; i++) {
    images[i].onload = function() {
      if (images.length > divs.length) return;
      divs[i].replaceWith(this);
    };

    images[i].onerror = function() {
      console.log("Error " + this.src);
      this.remove();
      return;
    };
  }
}

onLoad();

＆＃13;

.img-replace {
  float: left;
  border: 1px solid black;
}

＆＃13;

<div style="width:114px;height:40px;font-size:32px;letter-spacing:3px" class="img-replace">
  <span style="color:#1A53F7">G</span><span style="color:#E42131">o</span><span style="color:#FEB819">o</span><span style="color:#164AF2">g</span><span style="color:#00a315">l</span><span style="color:#E42131">e</span>
</div>

<div style="width:101px;height:40px;font-size:32px" class="img-replace">
  <span style="color:purple">Yahoo!</span>
</div>

<div style="width:100;height:40px;font-size:32px;color:#006dd4;font-weight:bold;letter-spacing: 3px; font-family:Arial">bing</div>

<hr>

<img src="https://js.cx/search/google.png" width="101" height="40" alt="Google">
<img src="http://toplogos.ru/images/logo-yahoo.jpg" width="114" height="40" alt="Yahoo">
<img src="https://js.cx/search/bing.png" width="101" height="40" alt="No file (bing)">

＆＃13;

Answer 1

我改变了你的声明。我这样做的原因是迭代-(void)viewDidLoad { [self.tableView registerNib:[UINib nibWithNibName:@"cellForgetPassword" bundle:nil] forCellReuseIdentifier:@"cellForgetPassword"]; } - (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath { UITableViewCell *cellForgetPassword = [tableView dequeueReusableCellWithIdentifier:@"cellForgetPassword" forIndexPath:indexPath]; if(indexPath.section == 0) { return cellEmail; } else if(indexPath.section == 1) {return cellPassword; } else if(indexPath.section == 2) {return cellForgetPassword;} else if(indexPath.section == 3) {return cellLoginButton;} else return cellFacebook; return nil; }以外的任何内容都更容易，这是HTMLCollection和getByClassName的回复。这是因为他们没有附加到原型的任何可迭代（循环）方法。相反，我们会使用getByTagName返回querySelectorAll，其原型允许我们使用NodeList方法。这在后面的脚本中很有用。

此外，我们可以使用forEach来获得两个长度之间的最小整数。

Math.min

这会将您的声明更改为：

      var most = Math.min(images.length, divs.length);

FYI 你也可以像这样列出你的声明代码：

  var images = document.body.querySelectorAll('img');
  var divs = document.body.querySelectorAll('.img-replace');
  var most = Math.min(images.length, divs.length);

然后我们可以循环遍历数组，直到var images = document.body.querySelectorAll('img'), divs = document.body.querySelectorAll('.img-replace'), most = Math.min(images.length, divs.length);，因为我们确保拥有那么多图片和 div。

i < most

然后，我们使用for (let i = 0; i < most; i++) { images[i].onload = function() { divs[i].replaceWith(this); };提供的images方法遍历我们的forEach，并为每张图片添加NodeList功能。

onerror

注意：Fat Arrows是ES6的一部分而forEach并不总是实现 - 按照惯例，IE无法及时采用完整的EcmaScript语法，所以如果您正在寻找在该平台上使用此功能，您只需将代码更改为ES5：

    images.forEach(image => image.onerror = function() {
      console.log("Error " + this.src);
      this.remove();
      return;
    });
  }
}

＆＃13;

        for ( var i = 0; i < images.length; i++ ) {
          var image = image[ i ];
          image.onerror = function() {
            console.log( "Error " + this.src );
            this.remove();
            return;
          }
        } );

＆＃13;

function onLoad() {
  var images = document.body.querySelectorAll('img');
  var divs = document.body.querySelectorAll('.img-replace');
  var most = Math.min(images.length, divs.length);

  for (let i = 0; i < most; i++) {
    images[i].onload = function() {
    divs[i].replaceWith(this);
    };

    images.forEach(image => image.onerror = function() {
      console.log("Error " + this.src);
      this.remove();
      return;
    });
  }
}

onLoad();

＆＃13;

.img-replace {
  float: left;
  border: 1px solid black;
}

＆＃13;

无法使用循环正确替换DOM中的元素

1 个答案: