.each() jquery

.each()を使ってそれぞれの【　ul　】の子要素の一番目の【　li　】に " select " というクラスを追加してみます

HTML

<ul>
 <li>コンテンツ</li>
 <li>コンテンツ</li>
 <li>コンテンツ</li>
</ul>

<ul>
 <li>コンテンツ</li>
 <li>コンテンツ</li>
 <li>コンテンツ</li>
</ul>

jquery

$('ul').children('li').eq(0).addClass('select');

この場合、【　全てのul　】の中の子要素の一番目の【　li　】に【 class="select" 】が追加されてしまい
以下のような結果になります。

HTML

<ul>
 <li class="select">コンテンツ</li>     <!-- eq(0) --> 
 <li>コンテンツ</li>                    <!-- eq(1) -->
 <li>コンテンツ</li>                    <!-- eq(2) -->
</ul>

<ul>
 <li>コンテンツ</li>                    <!-- eq(3) -->
 <li>コンテンツ</li>                    <!-- eq(4) -->
 <li>コンテンツ</li>                    <!-- eq(5) -->
</ul>

これでは駄目なのでjqueryを以下のように書き直します

jquery

$('ul').children('li').each(function(){
  $(this).eq(0).addClass('select');
});

するとこのような結果になります

HTML

<ul>
 <li class="select">コンテンツ</li>     <!-- eq(0) --> 
 <li class="select">コンテンツ</li>     <!-- eq(0) -->
 <li class="select">コンテンツ</li>     <!-- eq(0) -->
</ul>

<ul>
 <li class="select">コンテンツ</li>     <!-- eq(0) -->
 <li class="select">コンテンツ</li>     <!-- eq(0) -->
 <li class="select">コンテンツ</li>     <!-- eq(0) -->
</ul>

これでは【それぞれのli(ul直下の子要素li)】を一つ一つ見て回るので
それぞれのindexが全て0になってしまいます。
なので、【それぞれのul】を見て回ってその子要素liの一番目にクラスが当たるように設定します。

jquery

$('ul').each(function(){
  $(this).children('li').eq(0).addClass('select');
});

するとこのような結果になります

HTML

<ul>
 <li class="select">コンテンツ</li>     <!-- eq(0) -->
 <li>コンテンツ</li>                    <!-- eq(1) -->
 <li>コンテンツ</li>                    <!-- eq(2) -->
</ul>

<ul>
 <li class="select">コンテンツ</li>     <!-- eq(0) -->
 <li>コンテンツ</li>                    <!-- eq(1) -->
 <li>コンテンツ</li>                    <!-- eq(2) -->
</ul>

以上、まわりくどい解説でした！