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();//获取该元素前面的所有的同级元素，为n4
alert($pre.length);//结果返回1，因为前面只有一个同级元素。如果n4前面还有一个span元素，那么this.first().prevAll().length为0!

测试代码2：

var reg="#n4";
//把字符串包装为jQuery对象了，这里打印结果为2。也就是相当于一个选择器对象
//和$("#n4")的选择结果是一样的
alert(jQuery("span").length);
//打印true
alert(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 element
return 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);