jQuery 中 each 嵌套时避免 this 关键字混淆

页面上有 3 个文本框和 3 个 button：

<input type="text" value="text1"/> 	
<input type="text" value="text2"/> 	
<input type="text" value="text3"/>

<input type="button" value="button1"/>
<input type="button" value="button2"/>
<input type="button" value="button3"/>
​

先看如下代码：

//获得多个文本框框对象 
var textObject = $("input[type='text']");

//获得多个button对象 	
var buttonObject = $("input[type='button']");

$(textObject).each(function () { 
  alert($(this).val());
  $(buttonObject).each(function () { 
	alert($(this).val()); 		
  })
})
​

两个 each 中的 alert 完全一样，但是外层 each 中弹出的三个值分别为 text1，text2，text3，而内层 each 中弹出的三个值则分别对应 button1，button2，button3，那如果想在内层 each 中弹出 text1，text2，text3 该怎么办呢？如下：

//获得多个文本框框对象 	
var textObject = $("input[type='text']");

//获得多个button对象 	
var buttonObject = $("input[type='button']");

$(textObject).each(function () { 

  //创建一个变量代替this使用，避免混淆
  var target = this;
  
  //循环为对应文本框赋值
  $(buttonObject).each(function () { 
	alert($(target).val());
	alert($(this).val()); 		
  })
})
​

工作中遇到的实际问题比较复杂，没有办法完全重现，只能写一个简单的例子，不过大致是一样的。在内层 each 中写 this，代码是无法区分这个 this 到底代表的是外层的还是内层的，所以只能当做内层来处理。因此，如果想在内层使用外层的 this，就需要创建一个变量，并把 this 赋值给它，用这个新的变量去代替 this，这样就能避免混淆。