先扫盲：
摘自菜鸟教程：jQuery 方法：text()、html() 以及 val()拥有回调函数。
回调函数有两个参数：被选元素列表中当前元素的下标，以及原始（旧的）值。然后以函数新值返回您希望使用的字符串
再上代码：
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> </head> <body> <ul> <li>demo</li> <li>demo</li> <li>demo</li> <li>demo</li> </ul> </body> <script src="jquery-1.12.4.min.js"></script> <script> $("li").click(function () { $(this).html(function(i,originTex){ return (originTex+i); }) }) </script> </html>
很奇怪，当点击元素"li"时总是在旧文本后追加下标0，与预期不一样。
再看接下来代码：
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> </head> <body> <ul> <li>demo</li> <li>demo</li> <li>demo</li> <li>demo</li> </ul> </body> <script src="jquery-1.12.4.min.js"></script> <script> // $("li").click(function () { // $(this).html(function(i,originTex){ // return (originTex+i); // }) // }) $(document).click(function(){ $("li").html(function(i,originTxt){ $(this).html(originTxt+i); }) }) </script> </html>
改变事件源，期待的结果出现了。
【代码解析】
第一种情况触发事件的是当前触发点击事件的li元素，$(this)指向它，只有一个元素，所以其下标一直是0；
第二种情况仅仅是通过document这个对象触发事件，进而执行的是一个典型的遍历赋值动作，这个不多做解释。