jQuery API系列-筛选-eq()

.eq(index)

　　index:

　　　　类型： Integer

　　　　整数，元素的位置，以0为基数

.eq(-index)

　　从集合最后一个元素开始倒数

如果一个jQuery对象表示一个DOM元素集合，.eq()方法从集合的一个元素中构造新的jQuery对象，所提供的索引标识这个集合中的元素的位置。

例子：tab 切换

　　

<style type="text/css">
        *{margin: 0;padding: 0;}
        li{list-style: none;}
        .hide{display: none;}
        .tabs-wp {width: 300px;margin: 10px auto;border: 1px solid #ccc;position: relative;z-index: 1;}
        .tabs-nav {background: #eee;border-bottom: 1px solid #ccc;position: relative;height: 32px;}
        .tabs-nav li{float: left; cursor: pointer;padding: 0px 10px;width:60px;margin: 5px 1px -1px 5px;height: 28px;line-height: 28px;text-align: center;}
        .tabs-nav li.tabs-current {background: #fff;border: solid #ccc;border-width: 1px 1px 0px 1px; margin: 4px 0px -1px 4px;position: relative; z-index: 2;}
        .tabs-pannel {height: 50px;line-height: 50px;text-align: center;}
    </style>

<div class="tabs-wp">
        <ul class="tabs-nav">
            <li class="tabs-current">tab-1</li>
            <li>tab-2</li>
            <li>tab-3</li>
        </ul>
        <div class="tabs-pannel">
            tab-1
        </div>
        <div class="tabs-pannel hide">
            tab-2
        </div>
        <div class="tabs-pannel hide">
            tab-3
        </div>
    </div>

<script type="text/javascript">
        $(function (){
            $(".tabs-nav li").mouseover(function (){
                var tabsNav = $(this).parent().find("li");
                var tabsPannel = $(this).parents(".tabs-wp").find(".tabs-pannel");
                var index = tabsNav.index(this);
                if(tabsPannel.eq(index)){
                    tabsNav.removeClass("tabs-current").eq(index).addClass("tabs-current");
                    tabsPannel.addClass("hide").eq(index).removeClass("hide");
                }
            });
        });
    </script>