jQuery nthChild

Slyweb

Поиск функций jQuery

Характеристика функции

[Селектор] nthChild(index)

Раздел "Selectors"

Выбрать все элементы, являющиеся энными ‘детьми’ для их родительских элементов или выбор чётных или нечётных элементов, являющихся ‘детьми’ для родитльских элементов.

Параметры

nthChild(index)

1.0

index: Индекс каждого выбираемого элемента "ребёнка", начинающийся с 1 или со строк even, odd, или равенства определенному значению ( т.е. :nth-child(even), :nth-child(4n) ),

Описание

В то время как метод :eq(index) выбирает только один элемент, здесь выборка происходит больше чем по одному элементу: Один для каждого родительского элемента. Множество для каждого родительского элемента как четных так и нечётных элементов, или элементов равных определенному значению. Индекс определен как единица, в отличие от индекса :eq(), который начинается с нуля.

Пример

:nth-child(index/even/odd/equation)

Возможно, Вам будет интересно прочитать статьи о jQuery:

Примеры

Пример:

Выбрать второй элемент li в каждом найденном списке (ul) и указать на него.

Пример
Весь код

"jQuery"

$("ul li:nth-child(2)").append("<span> - 2nd!</span>");

"HTML"

<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>

"CSS"

div { float:left; }
span { color:blue; }

"Живой пример jQuery"

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
                    "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<link href="http://slyweb.ru/css/jqueryiframe.css" 
rel="stylesheet" type="text/css"/>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.0/jquery.min.js"></script>
<script>
  $(document).ready(function(){

$("ul li:nth-child(2)").append("<span> - 2nd!</span>");

  });
</script>

</head>
<body class="iframe">


<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>


<style>

div { float:left; }
span { color:blue; }

</style>

Пример:

Пример показывает, как селектор работает с различными строками. Учтите что метод отличается от :even и :odd, которые не имеют отношения к родительским элементам и фильтруются самостоятельно. В методе :nth-child, тем не менее, подсчёт индекса элементов "детей" начинается с их родительского элемента. В каждом из блоков это легко объясняется...

Пример
Весь код

"jQuery"

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

"HTML"

<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>

"CSS"

  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; }

"Живой пример jQuery"

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
                    "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<link href="http://slyweb.ru/css/jqueryiframe.css" 
rel="stylesheet" type="text/css"/>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.0/jquery.min.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>

</head>
<body class="iframe">


<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>


<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>

Метод появился в jQuery 1.0

Официальная страница метода - http://api.jquery.com/nthChil/

Форма для комментариев

Версия jQuery 1.4.2 Документ создан 2010-08-21

Ошибки и опечатки
Предложения и жалобы
Поддержка сайта

Александр Ермаков. Хостинг - www.pwstudio.org

Руководство jQuery 1.4.2

Плагины jQuery UI

Эффекты

Возможно, Вам будет интересно прочитать статьи о jQuery: