:last-child
- $(':last-child') 1.1.4追加
- デモ
$(':last-child') 1.1.4追加
最後の子要素を選択します。
:lastが全体で1つだけの要素にしかマッチしないのに対し、:last-childは各要素内のそれぞれの1つ目の要素にマッチします。
デモ
各DIV内の最後のSPAN要素に対し、下線のスタイルとhoverイベントをセットしています。
<!DOCTYPE html>
<html>
<head>
<style>
span { color:#008; }
span.sogreen { color:green; font-weight: bolder; }
</style>
<script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
<div>
<span>晴れ、</span>
<span>曇り、</span>
<span>雨</span>
</div>
<div>
<span>徒歩、</span>
<span>電車、</span>
<span>車</span>
</div>
<script>
$("div span:last-child")
.css("text-decoration", "underline")
.hover(function () {
$(this).addClass("sogreen");
}, function () {
$(this).removeClass("sogreen");
});
</script>
</body>
</html>
© 2010 - 2017 STUDIO KINGDOM