jQuery – nth-childセレクターの例

投稿日: 2019-11-05 2019-11-05
タグ: jquery, jquery selector

jQuery

nth-child

は、親のntg-childであるすべての要素を選択するために使用されます。 n番目の子（n）は「1-indexed」です。つまり、「n」は1からカウントを開始します。

例:1.

$（ ‘tr:nth-child（3）’）

– 親の3番目の子である<tr>と一致するすべての要素を選択します。

$（ ‘tr:nth-child（3n）’）

– 親の3番目の子である<tr>と一致するすべての要素を選択します。 3.

$（ ‘tr:nth-child（even）’）

– 親の偶数子である<tr>と一致するすべての要素を選択します。

__P.S ‘even’と ‘odd’は常に

テーブルゼブラストライプエフェクト

を作成するために使用されます。

jQueryの例

テーブル行の背景色を動的に変更するためのnth-child関数の使用方法を示す簡単な例です。

<html>
<head>
<title>jQuery nth-child example</title>

<script type="text/javascript" src="jquery-1.3.2.min.js"></script>
</head>

<body>

<h1>jQuery nth-child example</h1>

<table border=1>
    <tr><td>Row #1</td></tr>
    <tr><td>Row #2</td></tr>
    <tr><td>Row #3</td></tr>
    <tr><td>Row #4</td></tr>
    <tr><td>Row #5</td></tr>
    <tr><td>Row #6</td></tr>
    <tr><td>Row #7</td></tr>
    <tr><td>Row #8</td></tr>
    <tr><td>Row #9</td></tr>
    <tr><td>Row #10</td></tr>
</table>
<br/>

<button>:nth-child(4)</button>
<button>:nth-child(3n)</button>
<button>:nth-child(even)</button>
<button>:nth-child(odd)</button>


<script type="text/javascript">
    $("button").click(function () {
      var str = $(this).text();
      $("tr").css("background", "white");
      $("tr" + str).css("background", "coral");
    });
</script>

</body>
</html>

リンク://wp-content/uploads/jQuery/jQuery-nth-child.html[デモを試してください]

jquery

jquery selector

getdocs

13036