Заданные условные элементы в своих родителях
Материал из JQuery
(Различия между версиями)
Admin (Обсуждение | вклад) |
Admin (Обсуждение | вклад) (→Пример 1) |
||
| Строка 37: | Строка 37: | ||
===Пример 1=== | ===Пример 1=== | ||
<p class="textAnderSource"> | <p class="textAnderSource"> | ||
| - | + | Продемонстрируем как работает <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> |
| - | + | <button>:nth-last-of-type(even)</button> | |
| - | < | + | <button>:nth-last-of-type(odd)</button> |
| - | < | + | <button>:nth-last-of-type(3n)</button> |
| - | < | + | <button>:nth-last-of-type(2)</button> |
| - | </ | + | </div> |
| - | < | + | <div> |
| - | <div> | + | <button>:nth-last-of-type(3n+1)</button> |
| - | < | + | <button>:nth-last-of-type(3n+2)</button> |
| - | < | + | </div> |
| - | + | ||
| - | </ | + | <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> | + | <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> |
| - | $( " | + | $( "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() с разными параметрами:
