0

我得到了以下代码（我从这里得到的）：

$( "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)按预期增加时。当 I 时alert(i)，它会提示 0-4 六次。此外，i不会添加到numberX类中。查看 DOM，i始终为零。循环有什么问题？

4

1 回答 1

2

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

例如，假设您的原始元素是 a <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/

于 2012-07-12T15:54:20.330 回答