Заданные элементы в своих родителях

Материал из JQuery

(Различия между версиями)
Перейти к: навигация, поиск
Строка 2: Строка 2:
<div class="titleOfArt">:nth-child(arg)<span class="nVers">1.1.4</span>&nbsp; :nth-child-last(arg)<span class="nVers">1.9</span></div>
<div class="titleOfArt">:nth-child(arg)<span class="nVers">1.1.4</span>&nbsp; :nth-child-last(arg)<span class="nVers">1.9</span></div>
-
Соответствует элементам, которые расположены в своих непосредственных предках с определенными условиями. Различия двух этих селекторов заключается только в том, что в <tt>:nth-child-last()</tt> позиции элементов рассматриваются в обратном порядке (с конца).
+
Соответствует элементам, которые расположены в своих непосредственных предках по определенным условиям. Различия двух представленных селекторов заключается только в том, что <tt>:nth-child-last()</tt> рассматривает позиции элементов в обратном порядке (т. е. с конца).
Стоит иметь ввиду, что нумерация позиций начинается '''не с 0''', а с 1!
Стоит иметь ввиду, что нумерация позиций начинается '''не с 0''', а с 1!
Строка 31: Строка 31:
  |}
  |}
-
Многие селекторы, например [[Элемент по индексу|<tt>:eq(n)</tt>]], [[Четные элементы|<tt>:even</tt>]], [[Элементы с индексом до n|<tt>:lt()</tt>]] и многие другие, фильтруют выбранные элементы, в зависимости от их расположения в наборе выбранных элементов. В отличии от них, <tt>:nth-child()</tt> производит фильтрацию, опираясь на их расположение в непосредственных предках.
+
Многие селекторы, например [[Элемент по индексу|<tt>:eq(n)</tt>]], [[Четные элементы|<tt>:even</tt>]], [[Элементы с индексом до n|<tt>:lt()</tt>]] и другие, фильтруют выбранные элементы, в зависимости от их расположения в наборе выбранных элементов. В отличии от них, <tt>:nth-child()</tt> и <tt>:nth-last-child()</tt> производят фильтрацию, опираясь на их расположение в непосредственных предках.
==В действии==
==В действии==
Строка 149: Строка 149:
   </div>
   </div>
   
   
-
   <span>фильтр<span id="inner"></span></span>
+
   <span>фильтр<span id="inner">: ...</span></span>
   
   
   <script>
   <script>

Версия 03:09, 3 октября 2013

:nth-child(arg)1.1.4  :nth-child-last(arg)1.9

Соответствует элементам, которые расположены в своих непосредственных предках по определенным условиям. Различия двух представленных селекторов заключается только в том, что :nth-child-last() рассматривает позиции элементов в обратном порядке (т. е. с конца).

Стоит иметь ввиду, что нумерация позиций начинается не с 0, а с 1!

Параметр arg может принимать следующие значения:

  • index — номер позиции элемента, внутри его непосредственного родителя.
  • even — элементы, находящиеся на четных позициях, внутри его непосредственного родителя.
  • odd — элементы, находящиеся на нечетных позициях, внутри его непосредственного родителя.
  • equation — выражение, описывающее номер позиции элемента, внутри его непосредственного родителя. Выражение должно быть целочисленным и зависить от n. Например 2n+1 соответствует элементам с позициями 1, 3, 5 и далее. 3n+2 соответствует элементам с позициями 2, 5, 8. (то есть вместо n будут подставляться значения 0, 1, 2 и далее).

Примеры использования:

$('div:nth-child(3)') вернет все div-элементы, которые находятся в своих непосредственных предках третьими по счету.
$('div:nth-child(odd)') вернет все div-элементы, которые находятся в своих непосредственных предках на нечетных позициях.
$('div:nth-child(even)') вернет все div-элементы, которые находятся в своих непосредственных предках на четных позициях
$('div:nth-child(2n+3)') вернет все div-элементы, которые в непосредственных предках находятся на позиции с номерами удовлетворяющими выражению 2n+3 (5, 7, 9...).

Многие селекторы, например :eq(n), :even, :lt() и другие, фильтруют выбранные элементы, в зависимости от их расположения в наборе выбранных элементов. В отличии от них, :nth-child() и :nth-last-child() производят фильтрацию, опираясь на их расположение в непосредственных предках.

Содержание

В действии

Пример 1

Отметим мужчин, стоящих в очереди на четных местах (элементы класса men, стоящие в элементах с классом queue (очередь) на четных позициях):


Пример 2

Продемонстрируем как работает :nth-child() с разными параметрами, а так же некоторые другие селекторы со схожими предназначениями:

Ссылки

Поисковые ключи:
  • заданные элементы в своих предках
  • nth-child

От автора jquery.page2page.ru

 
Мини-игра про поход за продуктами во время карантина.

за Comic Sans извени

Личные инструменты