jQuery的eq()和index()方法详解

关于eq()和index()方法，我们知道它们都可以获取元素的位置，但是具体是如何获取和排队的呢？两者又有什么区别呢？我们通过一个小例子来试验一下。

html部分

<div class="box">
    <p></p>
    <p></p>
    <h1 class="active">haha</h1>
    <p></p>
    <p class="active"></p>
    <h2>hehe</h2>
</div>
<div class="box">
    <p></p>
    <p></p>
    <h1 class="active">haha</h1>
    <p></p>
    <p class="active"></p>
    <h2>hehe</h2>
</div>

js部分

eq()方法

$(".box p").eq(1).css("background","green"); 

上边的代码，一般情况下我们可能会理解为，会为两个.box下的第2个p元素设置背景色。但实际并不是，运行的结果是只为第一.box下的第2个p元素设置了背景色。

$(".box p").eq(6).css("background","green");

上边的代码，运行结果是为第2个.box的第3个p元素设置背景色。也就是所有.box元素中所有p元素中的第7个。

故而，eq()方法的元素获取与排队原理如下：
先获取所有满足条件的元素进行整体的大排队，然后在这个大排队的基础上确定某个位置上的元素。

index()方法

$(".box p").click(function() {
   alert($(this).index());
});

index()得到的下标位置由自己在父元素中位置决定

比如点击第1个.box中的第1个p元素，弹出结果将为0；点击第一个.box中的第3个p元素，弹出结果将为3；
点击第2个.box中的第1个p元素，弹出结果将为0.

eq()与index()的应用 — 一个页面包含多个tab切换

// html部分

<div class="tab">
	<div class="top">
		<a href="#" class="current first">新闻</a>
		<a href="#">图片</a>
		<a href="#">军事</a>
	</div>
	<div class="bottom">
		<ul class="current">
			<li><a href="#" class="first">111链接链接链接链接</a></li>
			<li><a href="#">111链接链接链接链接</a></li>
			<li><a href="#">111链接链接链接链接</a></li>
			<li><a href="#">111链接链接链接链接</a></li>
			<li><a href="#">111链接链接链接链接</a></li>
		</ul>
		<ul>
			<li><a href="#" class="first">222链接链接链接链接</a></li>
			<li><a href="#">222链接链接链接链接</a></li>
			<li><a href="#">222链接链接链接链接</a></li>
			<li><a href="#">222链接链接链接链接</a></li>
			<li><a href="#">222链接链接链接链接</a></li>
		</ul>
		<ul>
			<li><a href="#" class="first">333链接链接链接链接</a></li>
			<li><a href="#">333链接链接链接链接</a></li>
			<li><a href="#">333链接链接链接链接</a></li>
			<li><a href="#">333链接链接链接链接</a></li>
			<li><a href="#">333链接链接链接链接</a></li>
		</ul>
	</div>
</div>
<div class="tab">
	<div class="top">
		<a href="#" class="current first">新闻</a>
		<a href="#">图片</a>
		<a href="#">军事</a>
	</div>
	<div class="bottom">
		<ul class="current">
			<li><a href="#" class="first">111链接链接链接链接</a></li>
			<li><a href="#">111链接链接链接链接</a></li>
			<li><a href="#">111链接链接链接链接</a></li>
			<li><a href="#">111链接链接链接链接</a></li>
			<li><a href="#">111链接链接链接链接</a></li>
		</ul>
		<ul>
			<li><a href="#" class="first">222链接链接链接链接</a></li>
			<li><a href="#">222链接链接链接链接</a></li>
			<li><a href="#">222链接链接链接链接</a></li>
			<li><a href="#">222链接链接链接链接</a></li>
			<li><a href="#">222链接链接链接链接</a></li>
		</ul>
		<ul>
			<li><a href="#" class="first">333链接链接链接链接</a></li>
			<li><a href="#">333链接链接链接链接</a></li>
			<li><a href="#">333链接链接链接链接</a></li>
			<li><a href="#">333链接链接链接链接</a></li>
			<li><a href="#">333链接链接链接链接</a></li>
		</ul>
	</div>
</div>

当一个页面中只有一个tab切换时

<script src="./jquery-1.12.1.min.js"></script>
<script>
	$(".tab .top a").mouseover(function() {
		var index = $(this).index();
		// 排他思想 设置当前菜单样式 其他5菜单移除
		$(this).addClass("current").siblings().removeClass("current");
           // 让对应的内容显示 
		$(".bottom ul").eq(index).addClass("current").siblings().removeClass("current");
	});
</script>

由于eq()方法的参数值获取的是将所有的ul的整体排序之后的值，可是$(".tab .top a").index()的值最大为2，所以不管在鼠标在第几个tab切换的a标签上悬浮时，都是第一个tab切换的下方列表内容在变化，其他的不会变化。

当页面中有多个tab切换时
因此，需要通过节点关系来确定发生变化的tab切换项。

$(".tab .top a").mouseover(function() {
	var index = $(this).index();
	// 排他思想 设置当前菜单样式 其他5菜单移除
	$(this).addClass("current").siblings().removeClass("current").parent().siblings().children().eq(index).addClass("current").siblings().removeClass("current"); 
});