jQuery firstや:nth-child系の一覧
この記事は年前に書かれました。不適当な記述を含む場合がありますので、参考程度に留めてください。
とても役に立つJqueryさん。
今日は「nth-child」系のマトメです。
動作確認用デモ
- :first
- :last
- :even
- :eq(2)
- :nth-child(2)
- :nth-child(2n)
MENU
- <li>list-1</li>
- <li>list-2</li>
- <li>list-3</li>
- <li>list-4</li>
- <li>list-5</li>
- <li>list-6</li>
<ul>
</ul>
- <li>list-1</li>
- <li>list-2</li>
- <li>list-3</li>
- <li>list-4</li>
- <li>list-5</li>
- <li>list-6</li>
<ul>
</ul>
FIRST
<script>
$("ul li:first").css({"font-size":"10px"});
</script>
li最初の要素の変更
LAST
<script>
$("ul li:last").css({"font-size":"10px"});
</script>
li最後の要素の変更
EVEN
<script>
$("ul li:even").css({"font-size":"10px"});
</script>
li偶数番目の要素の変更
ODD
<script>
$("ul li:odd").css({"font-size":"10px"});
</script>
li奇数番目の要素の変更
EQ(?)
<script>
$("ul li:eq(2)").css({"font-size":"10px"});
</script>
li3番目の要素の変更
:nth-child(?)
<script>
$("ul li:nth-child(2)").css({"font-size":"10px"});
</script>
各親要素、ここではulのli2番目を変更
nth-child(?n)
<script>
$("ul li:nth-child(2n)").css({"font-size":"10px"});
</script>
各親要素、ここではulのli2n番目の変更