0

次のコードを取得しました（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)期待どおりにインクリメントします。Ialert(i)の場合、0 ～ 4 を 6 回アラートします。また、クラスiに追加されません。numberXDOM を見ると、i常にゼロです。ループの何が問題になっていますか？

4

1 に答える 1

2

forループ whenではi==0、thisDOM では新しい要素に置き換えられました<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/

于 2012-07-12T15:54:20.330 に答える