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')最前⾯的那个元素；然后我们看看最前⾯的那个元素之前的同级元素有多少!
jquery字符串截取//最前⾯的那个元素是nz，他前⾯的同级元素是ul元素
console.log(siblings);

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。