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

Материал из JQuery

(Различия между версиями)
Перейти к: навигация, поиск
(Пример 1)
Строка 37: Строка 37:
===Пример 1===
===Пример 1===
<p class="textAnderSource">
<p class="textAnderSource">
-
Отметим мужчин, стоящих в очереди на четных местах (элементы класса men, стоящие в элементах с классом queue (очередь) на четных позициях):
+
Продемонстрируем как работает <tt>:nth-last-of-type()</tt> с разными параметрами:
</p>
</p>
<codeditor>
<codeditor>
Строка 47: Строка 47:
   <title>nth-last-of-type demo</title>
   <title>nth-last-of-type demo</title>
   <style>
   <style>
 +
  button {
 +
    display: block;
 +
    font-size: 12px;
 +
    width: 100px;
 +
  }
   div {
   div {
     float: left;
     float: left;
 +
    margin: 10px;
 +
    font-size: 10px;
 +
    border: 1px solid black;
   }
   }
   span {
   span {
     color: blue;
     color: blue;
 +
    font-size: 18px;
 +
  }
 +
  #inner {
 +
    color: red;
 +
  }
 +
  td {
 +
    width: 50px;
 +
    text-align: center;
   }
   }
   </style>
   </style>
Строка 58: Строка 74:
<body>
<body>
   
   
-
<div>
+
  <div>
-
  <ul>
+
    <button>:nth-last-of-type(even)</button>
-
     <li>John</li>
+
     <button>:nth-last-of-type(odd)</button>
-
     <li>Karl</li>
+
     <button>:nth-last-of-type(3n)</button>
-
     <li>Adam</li>
+
     <button>:nth-last-of-type(2)</button>
-
   </ul>
+
   </div>
-
</div>
+
  <div>
-
<div>
+
    <button>:nth-last-of-type(3n+1)</button>
-
   <ul>
+
    <button>:nth-last-of-type(3n+2)</button>
-
     <li>Dan</li>
+
  </div>
-
  </ul>
+
-
</div>
+
   <div>
-
<div>
+
     <table>
-
   <ul>
+
      <tr><td>John</td></tr>
-
     <li>Dave</li>
+
      <tr><td>Karl</td></tr>
-
     <li>Rick</li>
+
      <tr><td>Brandon</td></tr>
-
     <li>Timmy</li>
+
      <tr><td>Benjamin</td></tr>
-
    <li>Gibson</li>
+
    </table>
-
  </ul>
+
  </div>
-
</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>Фильтр<span id="inner"></span></span>
   
   
-
<script>
+
  <script>
-
$( "ul li:nth-last-of-type(2)" ).append( "<span> - 2nd to last!</span>" );
+
    $( "button" ).click(function() {
-
</script>
+
      var str = $( this ).text();
 +
      $( "tr" ).css( "background", "white" );
 +
      $( "tr" + str ).css( "background", "#ff0000" );
 +
      $( "#inner" ).text( str );
 +
    });
 +
  </script>
   
   
</body>
</body>
</html>
</html>
</codeditor>
</codeditor>
-
 
==Ссылки==
==Ссылки==

Версия 17:53, 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

Продемонстрируем как работает :nth-last-of-type() с разными параметрами:

Ссылки

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

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

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

за Comic Sans извени

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