jQuery过滤器:eq和:nth-child的区别

• jQuery中的过滤器是一种经常和其他类型的选择器混搭使用来进一步筛选匹配元素的选择器。它们非常容易分辨，因为过滤器总是以冒号（:）开头。就像之前介绍的属性选择器一样，如果单单使用过滤器。例如：选择页面中所有的第一个元素，我们就可以使用
  :first
  这样的过滤器，它等价于*:first。而过滤器又可以分为：位置过滤器、子过滤器、表单过滤器、内容过滤器以及一些其他的过滤器。
• 我们今天要比较的两个过滤器:eq和:nth-child就分别属于位置过滤器和子过滤器，它们经常容易被混淆。
• 大家都知道jQuery中的选择器很多都借鉴了CSS中的选择器，所以CSS和jQuery有很多选择器使用的方法都是相同的，但同时jQuery也有一些自己独有的选择器。其中:eq就是属于jQuery特有的选择器而:nth-child继承自CSS的规范。

• 这就引出了它们的第一个区别：选择器:eq的索引是从0开始的，而:nth-child的索引则是从1开始。假设现在有这样一组标签排列：

  <ul>
      <li>CSS1</li>
      <li>CSS2</li>
      <li>CSS3</li>
      <li>CSS4</li>
  </ul>

• 此时如果我们使用：

  $("li:eq(1)").css("background-color", "yellow");

  来选择文档中的元素，使被选中元素的背景色变为黄色，你会发现此时背景变黄的是内容为“CSS2”的那个li元素，而使用：

  $("li:nth-child(1)").css("background-color", "yellow");

  你会发现内容为“CSS1”的li元素的背景色变成了黄色。

• 第二个区别：选择器:eq在选择指定位置元素时只会比较同等类型的元素，而:nth-child则是会忽略元素的类型来确定被选择的元素。

• 让我们来对上面的html标签排列做下拓展，修改为：

  <p>paragraph 1</p>
  <ul>
      <li>CSS1</li>
      <li>CSS2</li>
      <li>CSS3</li>
      <li>CSS4</li>
  </ul>
  <ul>
      <li>jQuery1</li>
      <li>jQuery2</li>
      <li>jQuery3</li>
      <li>jQuery4</li>
  </ul>

  我们首先使用如下语句进行选择：

  $("ul:eq(1)").css("background-color", "yellow");

  这条语句的作用是选择文档中 第二个ul 元素部分的内容（时刻记住位置过滤器是jQuery特有的所以其起始位索引为0），你会发现li中内容为jQuery部分的背景色变成了黄色，若我们使用如下的语句进行重新选择：

  $("ul:nth-child(2)").css("background-color", "yellow");

  这条语句的意思是选择文档中ul元素排在所有元素第二位的那部分元素，所以背景色变成黄色的部分换成了内容为CSS的那部分li元素，因为此时p元素是第一个元素，忽略比较时的元素类型，自然是内容为CSS的ul被选中了。

• 其实两者的区别还是挺明显的是不是，那么再来看一个吧。假设有如下的标签内容：

  <ul class="myList">
      <li>
          <a href="http://jquery.com">JQuery Site</a>
          <ul>
              <li><a href="css1.txt" title="mycss">CSS1</a></li>
              <li id="li1"><a href="css2.pdf" title="css2">CSS2</a></li>
              <li><a href="css3.html" title="this is my">CSS3</a></li>
              <li>Basic XPath</li>
          </ul>
      </li>
      <li>JQuery also supports
          <ul>
              <li>Custom selectors</li>
              <li>Form selectors</li>
          </ul>
      </li>
  </ul>

  如果我们使用：

  $("li:eq(1)").css("background-color", "yellow");

  哪部分内容的背景色会变成黄色呢?如果你能很快速的找到说明你确实掌握了上面所提到的知识。答案是，内容为CSS1那部分的li的背景色会变成黄色。

• 我们分两个步骤来看：首先li元素选择器会选择页面中所有的li元素这个很好理解，那么按照相同类型的理论进行比较，我们只要找出第二个li那么就可以知道哪部分被选中了。第一个li是紧挨着 class属性值为myList的那个ul的li元素，那么内容为CSS1的li自然就变成了第二个了。

• 那么如果现在给出如下的语句：

  alert($(".myList :nth-child(2)").length);

  参照的依然是上面最后一部分的html代码。应该打印出什么呢，选中的是哪几部分的对象？