jquery 的 each , click , 中 $(this) 是指什么?在线等 , 希望高手解答 !!

标题写的不够清楚 , 就是说在如下一段代码中
<script type='text/javascript>
$('div').each(function(){
  $(this).html('fdsada');
  // 这个 $(this) 是什么 ?
})
</script>
以上一段代码中 , 其实直接使用 this 的 HTML 对象也是可以的 :
<script type='text/javascript>
$('div').each(function(){
  this.innerHTML = 'fdsada';
})
</script>我在 each 的源代码中看到这样一段代码 ( 有很多 , 我只挑我需要的写 ) :
each: function( object, callback, args )
// 这里的 object 就是当前 jQuery 对象里的 this 对象 , 假如说外面使用了 $('div') , 那么这里面包含了很多 jQuery 原对象和所有的 Div HTML OBJECT 对象 .
// 那么 function 里面的处理回调函数的是这样一部分 , 针对我所举例的 $('div')
var i = 0;
for ( ; i < length; ) {
  if ( callback.call( object[ i ], i, object[ i++ ] ) === false ) {
  break;
}可以看出来 , 使用 callback call 了 object , 也就是指向了 jQuery 内部的 this , 因为这在 jQuery 274 行
each: function( callback, args ) {
  return jQuery.each( this, callback, args );
}
中调用 . 注意 ( 这是 PS 部分 , 熟悉 JQUERY 这个方法的看不看都无所谓 ) : 这个方法是 jQuery.fn.each . 而它调用的是 : jQuery.each . 两个不一样 , 一个是 prototype 中的方法 , 另一个不是 . 所以这里的 THIS 显然是经过选择器 INIT 之后的 this , 假设 init 了 $('div') , 假设页面上有 3 个 DIV , 这里面就会出现 3 个 HTML . 这个 callback , 也就是我们
$('div').each(]function(){
  // codes ...
})
each 中的 FUNCTION , 而 for 中的 object[i] 显然是具体的某个 DIV 对象 , 先被使用 Array.prototype.slice 将 getElementsByTagName('div') 无用的方法剪切掉 , 只留下其中的 HTMLDIVOBJECT 后又被它将这些结果加入了 jQuery 的 this 对象 .
所以这里的 callback.call(this[i] , 指的便是某个具体 DIV 对象 , 所以你可以在 callback 中使用
$('div').each(function(){
  this.innerHTML = 'fasdfdsa'
})
来达到和
$('div').each(function(){
  $(this).html('fdsafdsafdsa');
})
同样的效果 .
所以 , 我也看了 jQuery 的 html:function .
我就不详解了 , 很简单 , 其实就是用
this[0].innerHTML .我这边说的可能比较粗 , 但看过 jQuery 源代码的人一定知道 .
所以我的疑问就是 , 为什么在 callback 中
this 对象等同于 jQuery $(this) 对象中的 this[0] , 难道说 callback.call(this[i] 将它合并到第 0 个去了？那之前所选择的 $('div') 里面的所有 HTML OBJECT 在哪里？非常期望高人解惑！！！谢谢！！！

解决方案 »

免费领取超大流量手机卡，每月29元包185G流量+100分钟通话, 中国电信官方发货

$(this)就是把DOM对象转换为JQ对象，each中的this返回的是DOM对象
你看一看核心部分中的index方法!
大概我说的不够清楚 , 我的意思是
为什么在 callback.call 之后
源代码中
html 或者是其他方法能够使用
this[0] 访问到对应的 DIV OBJECT . 我看了 index: 方法 , 它跟 EACH 似乎是驴唇不对马嘴的。因为
在 jQuery.find 的时候 , 已经 makeArray(context.getElementsByTagName('div'),'find',extra) 了 . 也就是说那里的 this[0] 就是所选的第一个元素 , 和我这里的 this 有可比性吗？因为在 CALLBACK 的循环中
this[i] , 有可能是 HTML 中的第 2/3/4/5/6/... 个元素 .
所以我问的就是 , 为什么 , 在 callback 中访问 JQUERY 本生对象（比如说 HTML()), 它得 this[0] 就是当前循环到的第 X 个对象 ?
连jquery基本的工作机制都不明白!
最烦这种人了 , 懂你就详细说一下 , 你别整个标题就让人弄去连方向都弄不清楚 INDEX 我是看了，简单的就是查找对象是否存在，我就搞不懂。我的问题你有看清楚吗?
简单的贴一下，我自己把 JQUERY 的结构拨出来了，也实现了 JQUERY 中的 $('div').find('ul').each(function(){})... 这样的，你简单的下下来看一下，我的疑问很简单为啥 118 行的 this[0] 指向的是 callback.call 的 this[i] , 直接复制粘贴可以运行<html>
<head>
<title>New Document</title>
<meta name="charset" content="utf-8">
<meta name="Generator" content="EditPlus ">
<meta name="Author" content="test">
<meta name="Keywords" content="Js,JavaScript,test">
<meta name="Description" content="Any about javaScript OOP Test.">
</head>
<body>
<div>
  <ul>
    <li>fdasdasfdas</li>
  </ul>
</div>
<div>
  <ul>
    <li>fdasdasfdas</li>
  </ul>
</div>
<div>
  <ul>
    <li>fdasdasfdas</li>
  </ul>
</div>
<div>
  <ul>
    <li>fdasdasfdas</li>
  </ul>
</div>
<div>
  <ul>
    <li>fdasdasfdas</li>
  </ul>
</div>
<span></span>
<script type='text/javascript'>
(function(){
  var j = function(selector,context){
    return new j.fn.init(selector,context,rootj);
  },
  rootj,
  splice = [].splice,
  push = Array.prototype.push;  j.fn = j.prototype = {
    constructor:j,
    push:push,
    splice:splice,
    init:function(selector,context,rootj){
      if(!selector){
        return this;
      }
      if(typeof selector=='string'){
        if(!context){
          return rootj.find(selector);
        }else{
          this.context = context;
          return context.find(selector);
        }
      }else{
        this.context = this[0] = selector;
        this.length = 1;
        return this;
      }
    },
    test:function(c){
      alert(c);
    },
    add:function(){
      var ret = this.constructor();
      ret.context = this.context;
      return ret;
    }
  }
  j.fn.init.prototype = j.fn;  j.extend = j.fn.extend = function(){
    for(i=0;i<arguments.length;i++){
      for(k in arguments[i]){
        this[k] = arguments[i][k];
      }
    }
  }  rootj = j(document);  j.fn.extend({
    find:function(selector){
      if(typeof selector == "string"){// 如果是字符串的话
        var ret = this.add(selector);
        for(i=0,l=this.length;i<l;i++){
          var length = ret.length;
          makeArray(this[i].getElementsByTagName(selector),ret);
          if ( i > 0 ) {
            // Make sure that the results are unique
            for ( n = length; n < ret.length; n++ ) {//n=1;n<4;n++
              for ( r = 0; r < length; r++ ) {
                if ( ret[r] === ret[n] ) {//ret[0] === ret[1]
                  ret.splice(n--, 1);
                  break;
                }
              }
            }
          }
        }
        var tmp = '';
        for(k in ret)tmp+=k+' : '+ret[k]+'<br />';
        document.getElementsByTagName('span').item(0).innerHTML = tmp;
        return ret;
      }
    },
    each:function(callback){
      for(i=0;i<this.length;i++){
        callback.call(this[i],i);
      }
    },
    html:function(val){
    //for(k in this)alert(k+' : '+this[k]);
      if(val==''){
        alert(this[0].innerHTML);
      }else{
        this[0].innerHTML = val;
      }
    }
  });  var makeArray = function( array, results ) {
    array = Array.prototype.slice.call( array, 0 );
    if ( results ) {
      results.push.apply( results, array );
      return results;
    }
    return array;
  };  window.$ = j;
})();
$('div').find('li').each(function(i){
$(this).html('kk'+i+'');
});
</script>
</body>
</html>
INDEX 我是看了，简单的就是查找对象是否存在
re:
我了个去!难道我看的不是jquery文档.核心部分:index.是这样定义的.搜索与参数表示的对象匹配的元素，并返回相应元素的索引值。
如果找到了匹配的元素，从0开始返回；如果没有找到匹配的元素，返回-1。这样再看不懂我也没撤!
var jqueryInstance=$('.div');
jqueryInstance.each(function(){
   //ETC
});each方法是javascript中就有的!
你看清楚我的问题了吗？
哥哥，我是这个意思
each(function(){
// 在这个中使用 $(this).html() 的话
})
为什么
jQuery.fn.html
里面直接使用
this[0] 就可以访问到
each 中 callback.call(this[i] 为啥能访问到这个 this[i] 其他的我回头慢慢看 , 您能不能先给我解答了这个？拜托了，虽然效果实现了但我就是不知道为啥能访问到
$("div").each(function(){
    //直接用this的话，这里的this就是each遍历到的div元素
//$(this)就是把each遍历到的div元素转化成jquery对象，因为只有jquery对象才有你后面的.html("...")这个方法，this本身是dom对象，是没有html()这方法的
同样的道理，不管是啥dom对象，只要用相同的形式($(dom对象))就能转化成jquery对象了。
});
不过兄弟
这样再看不懂我也没撤!
var jqueryInstance=$('.div');
jqueryInstance.each(function(){
  //ETC
});each方法是javascript中就有的!each 方法真的是 javascript 中就有的吗？
//var jqueryInstance=$('.div');
jqueryInstance.each(function(){
  //ETC
});你看你这个代码还能不能运行 , 完了你就知道 .each 方法是不是 jquery 中就有的了 - - .
每次用this都是凭感觉，用多了就知道指的是什么了
如果你用this[i]的话只能用innerHTML了，不能用html（）
唯一的问题是你看懂我的问题了吗？
我不是和你喷啊，我只是觉得，你太粗心了，这个 EACH 并不是原生的 javascript 中自带的方法
JQUERY 中定义了两个
jQuery.fn.each
jQuery.each
在这里面定义的 , 至少我觉得你调用的肯定是
jQuery.fn.each 这个方法 , 不然你在里面加个 alert 试试 .我在 9 楼已经将代码贴出来了也将问题说的相当清楚了 , 你高手能否针对我的问题解答一下呢？谢谢，别随便再弄出个 eq 什么的让我看，然后再说 : 你什么也不懂 !!!!!.... 我差不多真的要什么懂的去了 !
我承认我错了!你只能直白理解么!我说each你就想each.想不到for each
var jqueryInstance=$('.div');
jqueryInstance.each(function(){
  //ETC
});我这样写只是让你去看核心的这个jquery对象实例.不要被过度的封装迷惑.
foreach 是 php 里的 , 跟 js 没关系啊
js 里 foreach 里 JQUERY 里经常用 for(k in ...
咱也不乱抓了 , 简单的来说能帮我解释下我那个代码中或是 JQUERY 代码中为啥中的 this[i] 为啥在 CALLBACK 之后再调用 JQUERY 对象，方法里面的 this[0] 就能准确指向 FOR 中不断循环的 THIS[I] 呢？我那个代码可以实现效果的，你赋值粘贴一下你看就明白了，虽然效果都出来了我就是不懂 THIS【0】到底是怎么指过去的
别说打字!就是面对面讲.还是要靠你理解!你理解不了不能说人家讲的不好!我不是说我讲的好!我在CSDN只点!不会跟哪个人讲的哪么细!我相信谁也不会!我也不是说你理解的不对!只能说我点的方向你没看到!最后回复!祝你好运
var jqueryInstance=$('.div');
jqueryInstance.each(function(){
  //ETC
});
你调的这个我清楚啊
先调用了
jQuery.fn.each
完了它直接
return jQuery.each(this,callback
它直接把当前的 this 传过去了
啊 , 我好像感觉我的问题渐渐的能够说清楚了，真不容易，我也对我的表述感到纠结如果是 $('div'), 那 this 里一定包含了数个 HTMLDIV 对象。包含了所有的 DIV HTML 对象。
问题是它一循环
for ( ; i < length; ) {
if ( callback.call( object[ i ], i, object[ i++ ] ) === false ) {
break;
}
}
在 callback.call(objectp[i] , 在这个 CALLBACK 中使用
$(this).html() 调用
jQuery.fn.html 方法，为什么
它得 this[0] 可以指向循环中的 object[i] ...
我勒个去，终于问清楚了
高手 , 我来告诉你 , 为什么
each(function(){
  $(this).html('xx')
})
而 jQuery.fn.html 方法中
this[0] 就等于具体循环的 HTML OBJ 吧 .
首先 , 代码 660 行 :
for ( ; i < length; ) {
if ( callback.call( object[ i ], i, object[ i++ ] ) === false ) {
break;
}
因为知道 jQuery 的 FIND 方法会通过 MAKEARRAY 将所有 getElementsByTagName('div') 将所有 DIV 对象都存入 RET 。而返回了这个 RET 对象 , 我们们接下来的调用而言 , 就是 jQuery 内部那个 this .而使用了 .each 方法之后它运行到我上面给出的那一段 , 也就是说这里的 callback.call(object[i] 是某个具体的 DIV 对象 , 对不对 ?
你可以这么干
$('div').each(function(){
  this.innerHTML = 'dfdas';
})
你看是不是所有的 DIV 内容都改变了 .
那么就确认了这是个具体的 HTML OBJECT .
那么在里面使用 $(this) , 什么意思？
使用选择器选择当前这个 HTML 对象 .
根据选择其中 :
// Handle $(DOMElement)
if ( selector.nodeType ) {
  this.context = this[0] = selector;
  this.length = 1;
  return this;
}
你自己看 , 作者写的注释还在那 . 那么 , 这个时候 this[0] 是不是就等于具体循环到的某个 OBJECT[i] ?因为 if 最后的 return this , 那是不是包含了 jQuery.fn 中的所有方法？
所以
你使用
$(this).html('xx')
在 jQuery.fn.html 方法里是不是 this[0].innerHTML ???
if 里面的第一句就写得再也清楚不过了 , 不过我确实是菜鸟 , 但我始终不大理解这和 jQuery 的 index 有什么关系？
而且我还没看这个 index 是 jQuery.fn.index 还是 jQuery.index , 我还没看这个。但是我的问题已经非常清楚了，我还有个方法可以证明。你可能没用过，你可以这样 :$('div').each(function(){
  $(this)[0].innerHTML = 'fdsafds'
})看看是不是改变了？现在我的 THIS 是什么，清楚的一塌糊涂了吧？为什么是这样是不是也清楚的一塌糊涂了？
当然，谢谢高手!!!
谢谢各位的热情参与 , xiaofanku , 也很谢谢一直跟了我很久 , 虽然没帮上啥忙 , 但真的很谢谢能跟这么久 .