jQuery源码分析之$.index函数

测试代码1：

<div id="n1"><div id="n2"><ul id="n4"><li id="n5">item1</li><li id="n6">item2</li><li id="n7">item3</li></ul><span id="nz"></span><span id="n8"></span></div> </div>

JS部分

 var first=$("span").first();//获取到第一个span元素id="nz"var $pre=first.prevAll();//获取该元素前面的所有的同级元素，为n4alert($pre.length);//结果返回1，因为前面只有一个同级元素。如果n4前面还有一个span元素，那么this.first().prevAll().length为0!

测试代码2：

var reg="#n4";//把字符串包装为jQuery对象了，这里打印结果为2。也就是相当于一个选择器对象//和$("#n4")的选择结果是一样的alert(jQuery("span").length);//打印truealert(jQuery(reg) instanceof jQuery);

index源码分析：

 index: function( elem ) {// No argument, return index in parent//调用方式： $("li").index( )//如果没有传入参数，那么if ( !elem ) {//首先，获取满足选择器的第一个元素，然后获取第一个元素前面的所有的同级元素的个数return ( this[0] && this[0].parentNode ) ? this.first().prevAll().length : -1;}// index in selector//如果指定参数为字符型，如调用：$("li").index( "#n4" )if ( typeof elem === "string" ) {return jQuery.inArray( this[0], jQuery( elem ) );}// Locate the position of the desired elementreturn jQuery.inArray(// If it receives a jQuery object, the first element is used//如果是jQuery对象作为参数，那么获取参数第一个对象在调用选择器中的位置!elem.jquery ? elem[0] : elem, this );}

总结：（为了方便，把调用者称为调用对象，参数称为参数对象）

（1）参数对象如果是jQuery对象或者DOM对象，那么获取该jQuery对象的第一个DOM元素或者传入的DOM元素，看他在调用对象中的位置

（2）参数对象如果是String对象，那么把参数对象封装为jQuery选择器对象，判断调用对象的第一个DOM元素在该参数选择器中的位置

（3）参数如果是空，那么获取满足调用者对象选择结果的最前面的一个元素（如$("span")表示最前面的span元素$("span")[0]，然后看最前面的$("span")[0]元素的兄弟节点的个数）的前面所有的同级元素的个数this.first().prevAll().length

 //如果调用index方法时候，没有传入参数，我们就是获取第一个调用对象的最前面的同级元素个数!   var $spans=$('span');   var siblings=$spans.index();   //首先获取调用对象的$('span')最前面的那个元素;然后我们看看最前面的那个元素之前的同级元素有多少!   //最前面的那个元素是nz,他前面的同级元素是ul元素  console.log(siblings);