关于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");
});