селектор nth-child
Описание: Соответствует всем элементам, которые являются «N-ными потомками» их родителей.
jQuery(':nth-child(index/even/odd/equation)')
Добавлена в версию: 1.1.4
index
Индекс каждого дочернего элемента начиная с 1, четный, нечетный или формулы (например, :nth-child(even), :nth-child(4n)).
Поскольку jQuery реализация :nth-child(n) является строго производной от спецификации CSS, значение n начинается с 1. Для всех остальных выражений выбора, однако, jQuery следует JavaScript подсчету, начиная с 0.
Таким образом, данный одиночный <ul> включает два элемента <li>, $('li:nth-child(1)') выбирает первый <li>, в то время как $('li:eq(1)') выбирает второй.
Псевдо-класс :nth-child(n) легко спутать с :eq(n), хотя оба могут получить резко отличающиеся соответствующие элементы. С :nth-child(n), все дети подсчитываются, независимо от того, кем они являются, и указанный элемент выбирается, только если он соответствует прилагаемому селектору в псевдо-классе.
С :eq(n) только селектор, прилагаемый к псевдо-классу подсчитывается,
не только для детей любого другого элемента, и (N +1)-й элемент (N начинается с 0) выбирается.
Дальнейшее обсуждение этого необычного использования можно найти в спецификации W3C CSS.
Примеры
Пример 1
Поиск второго элемента li в каждом найденном блоке ul.Полный код:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<script src="http://code.jquery.com/jquery-1.5.js" type="text/javascript"></script>
<script>
$(document).ready(function(){
$("ul li:nth-child(2)").append("<span> - 2nd!</span>");
});
</script>
<style>
div { float:left; }
span { color:blue; }
</style>
</head>
<body>
<div><ul>
<li>John</li>
<li>Karl</li>
<li>Brandon</li>
</ul></div>
<div><ul>
<li>Sam</li>
</ul></div>
<div><ul>
<li>Glen</li>
<li>Tane</li>
<li>Ralph</li>
<li>David</li>
</ul></div>
</body>
</html>
Пример 2
Эта игровая площадка, предназначена для того чтобы увидеть, как селектор работает с разными строками. Обратите внимание, что это отличается от :even и :odd, которые не имеют связи с родителями и просто фильтруют список элементов с любым другим. :nth-child, однако, считает индекс ребенка для его конкретных родителей. В любом случае, это легче увидеть, чем объяснить, так что ...Пример 2 - Полный код:
<!DOCTYPE html>
<html>
<head>
<style>
button { display:block; font-size:12px; width:100px; }
div { 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>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript" language="javascript">
$(document).ready(function(){
$("button").click(function () {
var str = $(this).text();
$("tr").css("background", "white");
$("tr" + str).css("background", "#ff0000");
$("#inner").text(str);
});
});
</script>
</head>
<body>
<div>
<button>:nth-child(even)</button>
<button>:nth-child(odd)</button>
<button>:nth-child(3n)</button>
<button>:nth-child(2)</button>
</div>
<div>
<button>:nth-child(3n+1)</button>
<button>:nth-child(3n+2)</button>
<button>:even</button>
<button>:odd</button>
</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><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>
tr<span id="inner"></span>
</span>
</body>
</html>
Была ли эта информация полезной?
