nth-child(индекс/even/odd/формула)

« Обратно на страницу селекторов

[редактировать]

:nth-child(индекс/even/odd/формула)

Соответствует всем элементам, которые являются «N-ными потомками» либо четными/нечетными «потомками».
Тогда как :eq(index) соответствует лишь одному элементу, данный селектор — более, чем одному:  один для каждого родительского объекта с индексом и несколько для каждого родительского объекта с even, odd или указанной формулой. Указанный в данном селекторе индекс начинается с 1, в отличие от :eq(), где он начинается с 0.
Аргументы:
индекс Число/Строка
Индекс каждого дочернего элемента начиная с 1, even, odd или формулы (например, :nth-child(even), :nth-child(4n)).
Примеры:
Поиск второго элемента li в каждом найденном блоке ul.
$("ul li:nth-child(2)").append("<span> - 2nd!</span>");
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
                    "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
  <script src="http://code.jquery.com/jquery-latest.js"></script>

  <script>
  $(document).ready(function(){
    $("ul li:nth-child(2)").append("<span> - 2nd!</span>");
  });
  </script>
  <style>

  div { float:left; }
  span { color:blue; }
  </style>
</head>
<body>
  <div><ul>
    <li>John</li>

    <li>Karl</li>
    <li>Brandon</li>
  </ul></div>
  <div><ul>

    <li>Sam</li>
  </ul></div>
  <div><ul>
    <li>Glen</li>

    <li>Tane</li>
    <li>Ralph</li>
    <li>David</li>
  </ul></div>

</body>
</html>
Небольшой прием для демонстрации того, как селектор работает с различными строками. Обратите внимание, что это отличается от :even и :odd, которые не берут во внимание родительские объекты, а только лишь отфильтровывают список элементов. Селектор :nth-child, напротив, рассчитывает индекс дочернего объекта относительно конкретных «родителей». В любом случае, проще один раз увидеть, чем сто раз услышать…
    $("button").click(function () {
      var str = $(this).text();
      $("tr").css("background", "white");
      $("tr" + str).css("background", "#ff0000");
      $("#inner").text(str);
    });
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
                    "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
  <script src="http://code.jquery.com/jquery-latest.js"></script>

  <script>
  $(document).ready(function(){

    $("button").click(function () {
      var str = $(this).text();
      $("tr").css("background", "white");
      $("tr" + str).css("background", "#ff0000");
      $("#inner").text(str);
    });

  });
  </script>

  <style>
  button { display:block; font-size:12px; width:100px; }
  div { float:left; margin:10px; font-size:10px;
        border:1px solid black; }
  span { color:blue; font-size:18px; }
  #inner { color:red; }
  td { width:50px; text-align:center; }
  </style>
</head>
<body>
  <div>
    <button>:nth-child(even)</button>

    <button>:nth-child(odd)</button>
    <button>:nth-child(3n)</button>
    <button>:nth-child(2)</button>
  </div>

  <div>
    <button>:nth-child(3n+1)</button>
    <button>:nth-child(3n+2)</button>
    <button>:even</button>

    <button>:odd</button>
  </div>
  <div><table>
    <tr><td>John</td></tr>

    <tr><td>Karl</td></tr>
    <tr><td>Brandon</td></tr>
    <tr><td>Benjamin</td></tr>

  </table></div>
  <div><table>
    <tr><td>Sam</td></tr>
  </table></div>

  <div><table>
    <tr><td>Glen</td></tr>
    <tr><td>Tane</td></tr>

    <tr><td>Ralph</td></tr>
    <tr><td>David</td></tr>
    <tr><td>Mike</td></tr>

    <tr><td>Dan</td></tr>
  </table></div>
  <span>
    tr<span id="inner"></span>

  </span>
</body>
</html>
Name Type