jQuery – 最初の子
例
-
$（ ‘li:first-child’） – <li>と一致するすべての要素を選択します.
親の最初の子です。
-
$（tr:first-child ‘） – <tr>でマッチした要素をすべて選択します.
親の最初の子です。
-
:last-child ** は、親の最後の子であるすべての要素を選択するために使用されます。
例
-
$（ ‘li:last-child’） – <li>でマッチしたすべての要素を選択します.
親の最後の子。
-
$（tr:last-child ‘） – <tr>でマッチしたすべての要素を選択します.
親の最後の子。
jQueryの例
“li”背景色を動的に追加するための最初の子と最後の子関数の使用を示す簡単な例です。
<html>
<head>
<title>jQuery first child and last child example</title>
<script type="text/javascript" src="jquery-1.3.2.min.js"></script>
</head>
<body>
<h1>jQuery first child and last child example</h1>
<ul>
<li>li #1</li>
<li>li #2</li>
<li>li #3</li>
<li>li #4</li>
<li>li #5</li>
</ul>
<button>li:first-child</button>
<button>li:last-child</button>
<script type="text/javascript">
$("button").click(function () {
var str = $(this).text();
$("li").css("background", "white");
$(str).css("background", "coral");
});
</script>
</body>
</html>
リンク://wp-content/uploads/jQuery/jQuery-first-child-last-child.html[デモを試してください]
