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

Материал из JQuery

(Различия между версиями)
Перейти к: навигация, поиск
(Новая страница: «<div class="bradCrampLink"><< Селекторы</div> <div class="titleOfArt">:nth-of-type(arg)<span class="nVers">1.9</span>  :nth-last…»)
Строка 4: Строка 4:
Различия двух представленных селекторов заключается только в том, что :nth-last-of-type() рассматривает позиции элементов в обратном порядке (т. е. с конца).
Различия двух представленных селекторов заключается только в том, что :nth-last-of-type() рассматривает позиции элементов в обратном порядке (т. е. с конца).
-
Это фильтрующие селекторы (отфильтровывают элементы, выбранные с помощью  
+
<tt>:nth-of-type()</tt> &mdash; фильтрующий селектор (отфильтровывает элементы, выбранные с помощью предшествующей части селектора). Фильтрация происходит по следующему принципу:  
-
предшествующей части селектора). Фильтрация данных селекторов происходит по следующему принципу:  
+
* Элементы, выбранные по предшествующей части селектора разделяются на группы по общему родителю.  
* Элементы, выбранные по предшествующей части селектора разделяются на группы по общему родителю.  
-
* Внутри каждой группы будут выбираються те из элементов, которые находятся '''в своей группе''' на определенных позициях (например четных, или кратных трем, или просто первый встреченный элемент).
+
* Внутри каждой группы будут выбираться те из элементов, которые находятся '''в своей группе''' на определенных позициях (например четных, или кратных трем, или просто первый встреченный элемент). Эти элементы и станут результатом работы селектора <tt>:nth-of-type()</tt>.
Стоит иметь ввиду, что нумерация позиций начинается '''не с 0''', а с 1!
Стоит иметь ввиду, что нумерация позиций начинается '''не с 0''', а с 1!
Строка 35: Строка 34:
  |class="discr"|вернет каждый <tt>2n+3</tt>-й div-элемент (5, 7, 9...), встреченный в своем непосредственном предке.
  |class="discr"|вернет каждый <tt>2n+3</tt>-й div-элемент (5, 7, 9...), встреченный в своем непосредственном предке.
  |}
  |}
 +
 +
===Пример 1===
 +
<p class="textAnderSource">
 +
Отметим мужчин, стоящих в очереди на четных местах (элементы класса men, стоящие в элементах с классом queue (очередь) на четных позициях):
 +
</p>
 +
<codeditor>
 +
 +
<!doctype html>
 +
<html lang="en">
 +
<head>
 +
  <meta charset="utf-8">
 +
  <title>nth-last-of-type demo</title>
 +
  <style>
 +
  div {
 +
    float: left;
 +
  }
 +
  span {
 +
    color: blue;
 +
  }
 +
  </style>
 +
  <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
 +
</head>
 +
<body>
 +
 +
<div>
 +
  <ul>
 +
    <li>John</li>
 +
    <li>Karl</li>
 +
    <li>Adam</li>
 +
  </ul>
 +
</div>
 +
<div>
 +
  <ul>
 +
    <li>Dan</li>
 +
  </ul>
 +
</div>
 +
<div>
 +
  <ul>
 +
    <li>Dave</li>
 +
    <li>Rick</li>
 +
    <li>Timmy</li>
 +
    <li>Gibson</li>
 +
  </ul>
 +
</div>
 +
 +
<script>
 +
$( "ul li:nth-last-of-type(2)" ).append( "<span> - 2nd to last!</span>" );
 +
</script>
 +
 +
</body>
 +
</html>
 +
</codeditor>
 +
==Ссылки==
==Ссылки==

Версия 17:15, 6 ноября 2013

:nth-of-type(arg)1.9  :nth-last-of-type(arg)1.9

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

:nth-of-type() — фильтрующий селектор (отфильтровывает элементы, выбранные с помощью предшествующей части селектора). Фильтрация происходит по следующему принципу:

  • Элементы, выбранные по предшествующей части селектора разделяются на группы по общему родителю.
  • Внутри каждой группы будут выбираться те из элементов, которые находятся в своей группе на определенных позициях (например четных, или кратных трем, или просто первый встреченный элемент). Эти элементы и станут результатом работы селектора :nth-of-type().

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

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

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

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

$('div:nth-of-type(3)') вернет каждый третий div-элемент, встреченный в своем непосредственном предке.
$('div:nth-of-type(odd)') вернет каждый нечетный div-элемент, встреченный в своем непосредственном предке.
$('div:nth-child(even)') вернет каждый четный div-элемент, встреченный в своем непосредственном предке.
$('div:nth-child(2n+3)') вернет каждый 2n+3-й div-элемент (5, 7, 9...), встреченный в своем непосредственном предке.

Пример 1

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


Ссылки

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

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

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

за Comic Sans извени

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