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

Материал из JQuery

(Различия между версиями)
Перейти к: навигация, поиск
(Пример 2)
(Отмена правки 3834 участника Admin (обсуждение))
 
Строка 93: Строка 93:
-
===Пример 1===
+
===Пример 2===
-
Продемонстрируем как работает <tt>:nth-last-of-type()</tt> с разными параметрами:
+
Продемонстрируем как работает <tt>:nth-child()</tt> с разными параметрами, а так же некоторые другие селекторы со схожими предназначениями:
-
<codeditor>
+
<codeditor>
<!doctype html>
<!doctype html>
<html lang="en">
<html lang="en">
<head>
<head>
   <meta charset="utf-8">
   <meta charset="utf-8">
-
   <title>nth-last-of-type demo</title>
+
   <title>nth-child demo</title>
   <style>
   <style>
-
  button {
+
button { display:block; font-size:12px; width:100px; }
-
    display: block;
+
div { float:left; margin:10px; font-size:10px;
-
    font-size: 12px;
+
      border:1px solid black; }
-
    width: 100px;
+
span { color:blue; font-size:18px; }
-
  }
+
#inner { color:red; }
-
  div {
+
td { width:50px; text-align:center; }
-
    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>
   </style>
   <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
   <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
Строка 129: Строка 113:
<body>
<body>
   <div>
   <div>
-
     <button>:nth-last-of-type(even)</button>
+
     <button>:nth-child(even)</button>
-
     <button>:nth-last-of-type(odd)</button>
+
     <button>:nth-child(odd)</button>
-
     <button>:nth-last-of-type(3n)</button>
+
     <button>:nth-child(3n)</button>
-
     <button>:nth-last-of-type(2)</button>
+
     <button>:nth-child(2)</button>
   </div>
   </div>
   <div>
   <div>
-
     <button>:nth-last-of-type(3n+1)</button>
+
     <button>:nth-child(3n+1)</button>
-
     <button>:nth-last-of-type(3n+2)</button>
+
     <button>:nth-child(3n+2)</button>
 +
    <button>:even</button>
 +
    <button>:odd</button>
   </div>
   </div>
   
   
Строка 163: Строка 149:
   </div>
   </div>
   
   
-
   <span>tr<span id="inner"></span></span>
+
   <span>фильтр<span id="inner">: ...</span></span>
   
   
   <script>
   <script>
-
     $( "button" ).click(function() {
+
     $('button').click(function () {
-
       var str = $( this ).text();
+
       var str = $(this).text();
-
       $( "tr" ).css( "background", "white" );
+
       $('tr').css('background', 'white');
-
       $( "tr" + str ).css( "background", "#ff0000" );
+
       $('tr' + str).css('background', '#ff0000');
-
       $( "#inner" ).text( str );
+
       $('#inner').text(str);
     });
     });
   </script>
   </script>
 +
</body>
</body>
</html>
</html>

Текущая версия на 17:49, 6 ноября 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 извени

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