jQuery:find()方法 eq()方法 返回第N个元素

本文介绍了jQuery的两个方法，一个是find()方法，一个是eq()方法，联合起来可以用于返回第N个元素。一起来看看具体的使用办法吧。

find() 使用：

返回 <ul> 后代中所有的 <span> 元素：

$(document).ready(function(){

$("ul").find("span").css({"color":"red","border":"2px solid red"});

});

eq() 使用：

<ul>

  <li>list item 1</li>

  <li>list item 2</li>

  <li>list item 3</li>

  <li>list item 4</li>

  <li>list item 5</li>

</ul>

方法应用到这个列表项目集

$('li').eq(2).css('background-color', 'red'); //2 表示第三个 元素，0表示第一个元素，-1 表示最后一个元素。

二者联合案例

    <ul>
        <li><span>我是li 1</span></li>
        <li><span>我是li 2</span></li>
        <li><span>我是li 3</span></li>
    </ul>
    <div class="content">
        <div>我是我是li 1的div</div>
        <div>我是我是li 2的div</div>
        <div>我是我是li 3的div</div>
    </div>

方法如下

    $(function(){
        $(".content div").hide();
        $("li").hover(function() {
            $(this).toggleClass('hover');
            $(".content").find("div").eq($(this).index()).show();
        }, function() {
            $(this).toggleClass('hover');
            $(".content").find("div").eq($(this).index()).hide();
        });
        $(".content div").hover(function() {
            $(this).show();
        }, function() {
            $(this).hide();
        });
    })