jquey下eq()的使用注意事项

写在开始的话：

今天在公司路经同事工位，发现在写jquery代码，刚好遇见一个bug，于是驻足看了一会，发现了jq遍历方法中eq()的使用的一个容易犯错的地方。

同事的代码大概意思是这样的：

<div class="hover-div">
            <p>1231</p>
            <p>1231</p>
        </div>

        <div class="hover-div">
            <p>1231</p>
            <p>1231</p>
        </div>

        <div class="hover-div">
            <p>1231</p>
            <p>1231</p>
        </div>

        <div class="hover-div">
            <p>1231</p>
            <p>1231</p>
        </div>

        <div class="hover-div">
            <p>1231</p>
            <p>1231</p>
</div>

    <script type="text/javascript">
        $(".hover-div").find("p").eq(0).css("background-color","red");
    </script>

他是想每行的首个"p"标签，背景颜色变为红色，可是效果是这样

效果

明显效果不对，他当时的代码的想法应该是想着代码的执行顺序是循环着，先取一个'hover_div'，然后取内联元素中的'p'标签。

其实不然，可以打印如下：

console.log($(".hover-div").find("p"));

打印效果：

打印效果

即，此代码执行过后选取了所有的'p'标签，然后遍历使用eq的时候就会，选取相应的元素，所以方法的理解和选用都是错误的，应该在选择器中使用相应的方法或者如此：

        $(".hover-div").each(function(index, element) {
            $(element).find("p").eq(0).css("background-color", "red");
        });

或者

$(".hover-div p:first-child").css("background-color","red");

   
   
   

友情链接:

技术博客        简书主页