とある案件で、件名のようなピンポイントな事が出来たら便利だなと考え、方法を調べてみました。簡単かと思ったら、方法を書いてあるページがなかなか見つからず、苦労しました。

##やりたいこと

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