forループでイベントが追加されない

Question

これはhtmlです。リンクがクリックされた場合は、その前にあるspan要素をテキストに置き換えます。

<p><span id="sp1">that1</span> <a href="#" id="update1">Update1</a></p> 
<p><span id="sp2">that2</span> <a href="#" id="update2">Update2</a></p> 
<p><span id="sp3">that3</span> <a href="#" id="update3">Update3</a></p> 
<p><span id="sp4">that4</span> <a href="#" id="update4">Update4</a></p> 
<p><span id="sp5">that5</span> <a href="#" id="update5">Update5</a></p> 

ご覧のとおり、私の考えは、アンカーに同一のIDと番号を渡したことです。

私のjquery-codeでは、すべてのアンカー要素をループし、その前にあるspan要素を置き換えるクリックイベントを与えます。

<script type="text/javascript" > 

    $(document).ready(function() { 
    var numSpans = $("span").length; 
    for (n=0;n<=numSpans;n++) { 
    $("a#update" + n).click(function(e){ 
     $('span#sp' + n).replaceWith('this'); 
     e.preventDefault(); 
    });  
    } 
    }); 

</script> 

何らかの理由でこれが機能しません。

私は間違っていますか？

Answer 1

はこれを試してみてください：

$(function(){ 
    $("a[id^='update']").click(function(){ 
     var index = this.id.replace(/[^0-9]/g, ""); 
     $("span#sp" + index).replaceWith(this); 
     e.preventDefault(); 
    }); 
}); 

Answer 2

は、ループ内で関数を作成しないでください。 jQueryでは、明示的なループは必要ありません。

$(function() 
{ 
    $('span[id^=sp]').each(function(n) 
    { 
     $('#update' + n).click(function(e) 
     { 
      $('#sp' + n).replaceWith(this); 
      return false; 
     }); 
    }); 
}); 

デモ：http://jsfiddle.net/mattball/4TVMa/

---

あなたはそれよりも方法より良いを行うことができます、しかし：

$(function() 
{ 
    $('p > a[id^=update]').live('click', function(e) 
    { 
     $(this).prev().replaceWith(this); 
     return false; 
    }); 
}); 

デモ：http://jsfiddle.net/mattball/xySGW/

Answer 3

あなたの元のコードに問題がありますあなたが変数nのクロージャ。イベントハンドラが呼び出されると、宣言のポイントではなく、起動時にnの値で呼び出されます。アラートコールを追加することで、これを見ることができます。この問題を解決するために

$(document).ready(function() { 
    var numSpans = $("span").length; 
    for (n = 1; n <= numSpans; n++) { 
     $("a#update" + n).click(function(e) { 
      alert(n); //Alerts '6' 
      $('span#sp' + n).replaceWith('this'); 
      e.preventDefault(); 
     }); 
    } 
}) 

一つの方法はそうのように、各反復で、nの値にクロージャを作成することです：

$(document).ready(function() { 
    var numSpans = $("span").length; 
    for (n = 1; n <= numSpans; n++) { 
     $("a#update" + n).click(
      (function(k) { 
       return function(e) { 
        alert(k); 
        $('span#sp' + k).replaceWith('this'); 
        e.preventDefault(); 
       } 
      })(n) 
     ); 
    } 
}) 

しかし、これは面倒なことに、より多くのjQuery-yメソッドを使用する方がよいでしょう。

---

これを行う1つの方法は、コードからidを削除することです。あなたが何か他のもののためにそれらを必要としない限り、彼らが必要としていない：

<p><span>that1</span> <a href="#" class="update">Update1</a></p> 
<p><span>that2</span> <a href="#" class="update">Update2</a></p> 
<p><span>that3</span> <a href="#" class="update">Update3</a></p> 
<p><span>that4</span> <a href="#" class="update">Update4</a></p> 
<p><span>that5</span> <a href="#" class="update">Update5</a></p> 

のjQuery：

$(function() { 
    $('a.update').live('click', function() { 
     $(this).siblings('span').replaceWith("Updated that!"); 
    }); 
}); 

jsFiddle