とある案件で、件名のようなピンポイントな事が出来たら便利だなと考え、方法を調べてみました。簡単かと思ったら、方法を書いてあるページがなかなか見つからず、苦労しました。
##やりたいこと
test.html
<ul class="list">
<li>リスト1</li>
<li>リスト2</li>
<li>リスト3</li>
<li>リスト4</li>
<li>リスト5</li>
<li>リスト6</li>
<li>リスト7</li>
<li>リスト8</li>
<li>リスト9</li>
<li>リスト10</li>
<li>リスト11</li>
<li>リスト12</li>
</ul>
上記のHTMLに、jQueryを使って
test.html
<ul class="list">
<li class="group1">リスト1</li>
<li class="group1">リスト2</li>
<li class="group1">リスト3</li>
<li class="group1">リスト4</li>
<li class="group2">リスト5</li>
<li class="group2">リスト6</li>
<li class="group2">リスト7</li>
<li class="group2">リスト8</li>
<li class="group3">リスト9</li>
<li class="group3">リスト10</li>
<li class="group3">リスト11</li>
<li class="group3">リスト12</li>
</ul>
のように、
- 1〜4番目のliには、class"group1"を付与
- 5〜8番目のliには、class"group2"を付与
- 9〜12番目のliには、class"group3"を付与
##試行錯誤の末、これで行けました
test.html
<script type="text/javascript">
// ▼1〜4番目のliに、class"group1"を付与
$("ul.list li:nth-child(-n+4)").addClass("group1");
// ▼5〜8番目のliに、class"group2"を付与
$("ul.list li:nth-child(n+5):nth-child(-n+8)").addClass("group2");
// ▼9〜12番目のliに、class"group3"を付与
$("ul.list li:nth-child(n+9):nth-child(-n+12)").addClass("group3");
</script>
##コピペ用
test.html
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>test</title>
<style>
.group1{color: blue;}
.group2{color: red;}
.group3{color: green;}
</style>
</head>
<body>
<ul class="list">
<li>リスト1</li>
<li>リスト2</li>
<li>リスト3</li>
<li>リスト4</li>
<li>リスト5</li>
<li>リスト6</li>
<li>リスト7</li>
<li>リスト8</li>
<li>リスト9</li>
<li>リスト10</li>
<li>リスト11</li>
<li>リスト12</li>
</ul>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<script type="text/javascript">
// ▼1〜4番目のliに、class"group1"を付与
$("ul.list li:nth-child(-n+4)").addClass("group1");
// ▼5〜8番目のliに、class"group2"を付与
$("ul.list li:nth-child(n+5):nth-child(-n+8)").addClass("group2");
// ▼9〜12番目のliに、class"group3"を付与
$("ul.list li:nth-child(n+9):nth-child(-n+12)").addClass("group3");
</script>
</body>
</html>
##参考記事
下記ページの8番目の項目が参考になりました。
CSSの:nth-childと:nth-last-child擬似クラスの使用例 | NxWorld