Question

我收到了以下代码（我是从here获得的）：

$( "p" ).children().andSelf().contents().each( function () {
  if ( this.nodeType == 3 ) {
    var $this = $( this );
    var regEx = /(\w)/g;

    for(i = 0; i < 5; i++){
      $this.replaceWith( $this.text().replace( regEx, "<span class='numbers"+ i +"'>$&</span>" ));
     }
   }
});

这是功能正常的一部分。只有当我添加for-Loop时才会失败。

问题：当我console.log(i)时，它会按预期递增。当我alert(i)时，它会警告0-4六次。此外，i类中未添加numberX。查看DOM，i始终为零。循环有什么问题？

Answer 1

在for时i==0循环中，DOM中的this已被新的<span>元素替换，但在JavaScript上下文中，this仍在是指你的原始元素。这就是为什么进一步替换不起作用而且课程停留在0。

例如，假设您的原始元素是<div>：

i     | this  | The same place in DOM
======|=======|======================================
-     | <div> | <div>
0     | <div> | replaced by <span class="number0">
1...5 | <div> | <span class="number0"> (not affected)

因为在i==0之后，这已经脱离了DOM。所以进一步替换不起作用。

更正代码的方法是：

$("div").children().andSelf().contents().each(function(index,item){
    if (this.nodeType == 3) {
        var $this = $(item);
        var arr=$this.text().match(/(\w)/g);
        arr.forEach(function(item,i,a){a[i]=item.replace(/(.*)/, "<span class='number"+i+"'>$&</span>");});
        $this.replaceWith(arr.join(""));
    }
});

http://jsfiddle.net/KVm9C/

JavaScript：For-Loop无法正常工作

1 个答案: