十三、序号的问题

13.1 eq()

序号从0开始

eq()：选中元素大队列的排名，与亲兄弟的排名没有直接关系

选中元素不同，序号也不同

// 点击div，让它的第一个儿子变色
$("div").click(function(){
    $(this).children().eq(0).css("background-color","red");
});

$("div").click(function(){
    $("p").eq(0).css("background-color","red");
});

13.2 index()亲兄弟的排名

index()：表示亲兄弟的排名，无视亲兄弟的类型。只要是同一个父节点就是亲兄弟

<div class="box">
    <ul>
        <li>0</li>
    </ul>
    <h3>1</h3>
    <p>2</p>
    <p>3</p>
    <p class="teshu">4 点击输出亲兄弟的排名</p>
</div>

// 点击.teshu，输出它在亲兄弟中的排名 
$(".teshu").click(function(){
    console.log($(this).index());
});

index()值非常稳定，无视选择器的各种选择，在亲兄弟中排名是固定的

13.3 案例：对应思想

13.3.1 案例1

// 点击box1中的p，让对应的box2中的p变色
$("#box1 p").click(function(){
    $("#box2 p").eq($(this).index()).css("background-color","red");
});

13.3.2 案例2：选项卡

<div class="box">
    <div class="hd" id="hd">
        <span class="cur">新闻</span>
        <span>体育</span>
        <span>时尚</span>
    </div>
    <div class="bd" id="bd">
        <div class="active">新闻</div>
        <div>体育</div>
        <div>时尚</div>
    </div>
</div>
<div class="box">
    <div class="hd" id="hd">
        <span class="cur">新闻</span>
        <span>体育</span>
        <span>时尚</span>
    </div>
    <div class="bd" id="bd">
        <div class="active">新闻</div>
        <div>体育</div>
        <div>时尚</div>
    </div>
</div>



/* 清楚默认样式 */
* {
    margin: 0;
    padding: 0;
}

.box {
    width: 300px;
    height: 300px;
    border: 1px solid #000;
    margin: 50px auto;
}
.box .hd {
    height: 40px;
}
.box .hd span {
    float: left;
    width: 99px;
    height: 39px;
    border-right: 1px solid #000;
    border-bottom: 1px solid #000;
    line-height: 39px;
    text-align: center;
    background-color: #eee;
}
.box .hd span:last-child {
    border-right: none;
}
.box .hd span.cur {
    background-color: #fff;
    border-bottom: none;
    font-weight: bold;
}
.box .bd {
    height: 260px;
}
.box .bd div {
    display: none;
}
.box .bd div.active {
    display: block;
}




// 当鼠标移入hd里的span，当前span加cur类名，让bd中的div加active类名
// 绑定鼠标移入事件
$("#hd span").mouseenter(function(){
    // 当前span加cur
    $(this).addClass("cur");
    // 排他 让其他兄弟去掉cur
    $(this).siblings().removeClass("cur");

    // bd中div加active 排他 让其他兄弟去掉active
    $("#bd div").eq($(this).index()).addClass("active").siblings().removeClass("active");
})

解决方法：

使用节点操作，在bd中div加active ，排他 让其他兄弟去掉active

// 节点操作
$(this).parent(".hd").siblings(".bd").children("div").eq($(this).index()).addClass("active").siblings().removeClass("active");

// 连续打点写法
$("#hd span").mouseenter(function () {
    $(this).addClass("cur")
    .siblings().removeClass("cur")
    .parent().siblings().children().eq($(this).index())
    .addClass("active").siblings().removeClass("active");
});

13.3 each()每一个

只要看到“每一个”要做什么事情，首先要想到each()方法

• each()：表示“每一个”。

  • 用于循环、遍历所匹配到的每一个元素。

  • 接收一个参数就是：匿名函数

13.3.1 函数当中有一个this，表示遍历到的该对象

// 让每一个div中的第一个儿子颜色改变
$("div").each(function(){
    $(this).children().eq(0).css("background-color","red");
});

案例：隔列变色

// 隔列变色 每一行的偶数（even 从0开始数）列改为red，奇数（odd）列改为blue
$("tr").each(function(){
    $(this).children("td:even").css("background-color","red");
    $(this).children("td:odd").css("background-color","blue");
});

13.3.2 函数中有一个参数i（index），表示遍历到该对象的序号

// 输出函数中的参数 i
$(".teshu").each(function(i){
    console.log(i);
});