Question

我发现很多答案，它们之间没有区别：first-child和eq（0）。但是当我做以下事情时：

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){  $("ul.tab-nav li").eq(0).addClass("active");});

 </script>
  <?php
     // select 2 element.
   for($i=0;$i<2;$i++)   
     {
  ?>
          <ul class="tab-nav">
<?php 
       for($j=0;$j<2;$j++)      
      {
?>
               <li>  write st here </li>
<?php
      }
?>
          </ul>
<?php 
   }
?>

结果是：

<ul class= "tab-nav">
    <li class= "active">write st here</li>
    <li>write st here</li>
</ul>
<ul class= "tab-nav">
    <li>write st here</li>
    <li>write st here</li>
</ul>

当我更改脚本时

 $(ul.tab-nav li ).eq(0).addClass("active");

到

$(ul.tab-nav li:first-child ).addClass("active");

结果是：

 <ul class= "tab-nav">
        <li class= "active">write st here</li>
        <li>write st here</li>
    </ul>
    <ul class= "tab-nav">
        <li class= "active">write st here</li>
        <li>write st here</li>
    </ul>

我错了吗？什么是正确答案？它是等价还是不同？

Answer 1

.eq(0)找到匹配该值的第一个元素; :first-child正在查找每个ul.tab-nav的第一个子元素。

分解

$(ul.tab-nav li ).eq(0).addClass("active");

$(ul.tab-nav li)找到每个ul.tab-nav下的所有列表项，其中有四个。
.eq(0)仅选择这四个元素中的第一个。
.addClass("active")将“active”类添加到所选元素。

$(ul.tab-nav li:first-child ).addClass("active");

$(ul.tab-nav li:first child)找到每个li下的第一个ul.tab-nav元素，其中有两个。
.addClass("active")将“有效”类添加到这两个元素中。

Answer 2

 $(ul.tab-nav li ).eq(0).addClass("active");

将获得ul.tab-nav子项的所有li列表，并仅选择第一个（全部为li）。无论有多少ul，都会执行一次。

$(ul.tab-nav li:first-child ).addClass("active");

将获得其父亲的第一个孩子的每个li，这将为每个ul执行一次。

方程（0）与：第一个孩子

2 个答案: