[Селектор] nthChild(index)
Раздел "Selectors"
Выбрать все элементы, являющиеся энными ‘детьми’ для их родительских элементов или выбор чётных или нечётных элементов, являющихся ‘детьми’ для родитльских элементов.
Параметры
nthChild(index)
1.0
index: Индекс каждого выбираемого элемента "ребёнка", начинающийся с 1 или со строк even, odd, или равенства определенному значению ( т.е. :nth-child(even), :nth-child(4n) ),
Описание
В то время как метод :eq(index) выбирает только один элемент, здесь выборка происходит больше чем по одному элементу: Один для каждого родительского элемента. Множество для каждого родительского элемента как четных так и нечётных элементов, или элементов равных определенному значению. Индекс определен как единица, в отличие от индекса :eq(), который начинается с нуля.
Пример
:nth-child(index/even/odd/equation)
Примеры
Пример:
Выбрать второй элемент li в каждом найденном списке (ul) и указать на него.
"HTML"
<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>
"CSS"
div { float:left; }
span { color:blue; }
"Живой пример jQuery"
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <link href="http://test-drupal.ru/themes/slyweb/css/jqueryiframe.css" rel="stylesheet" type="text/css"/> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.0/jquery.min.js"></script> <script> $(document).ready(function(){ $("ul li:nth-child(2)").append("<span> - 2nd!</span>"); }); </script> </head> <body class="iframe"> <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> <style> div { float:left; } span { color:blue; } </style>
Пример:
Пример показывает, как селектор работает с различными строками. Учтите что метод отличается от :even и :odd, которые не имеют отношения к родительским элементам и фильтруются самостоятельно. В методе :nth-child, тем не менее, подсчёт индекса элементов "детей" начинается с их родительского элемента. В каждом из блоков это легко объясняется...
"jQuery"
$("button").click(function () {
var str = $(this).text();
$("tr").css("background", "white");
$("tr" + str).css("background", "#ff0000");
$("#inner").text(str);
});
"HTML"
<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>
"CSS"
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; }
"Живой пример jQuery"
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <link href="http://test-drupal.ru/themes/slyweb/css/jqueryiframe.css" rel="stylesheet" type="text/css"/> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.0/jquery.min.js"></script> <script> $(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 class="iframe"> <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> <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>
Версия jQuery 1.4.2
Документ создан 2010-08-21