jqueryで要素の範囲を指定したい

Question

jqueryで要素の範囲を指定したいのですがうまく動きません。

<div class="test">
  <ul >
       <li class='f'></li>
       <li class='f'></li>
       <li class='f'></li>
       <li class='f'></li>
       <li class='f'></li>
  </ul>
  <span class='hidden'>ここにチェックボックスのテキストが入ります</span>
</div>

<script >
    $(function(){
        $('.test').each(function(){
            if($(this).find(".hidden").text().indexOf('少ない') != -1){
                $(this).find(".f:lt(1)").addClass('ac');
            }
            else if($(this).find(".hidden").text().indexOf('やや少ない') != -1){
                $(this).find(".f:lt(2)").addClass('ac');
            }
            else if($(this).find(".hidden").text().indexOf('普通') != -1){
                $(this).find(".f:lt(3)").addClass('ac');
            }
            else if($(this).find(".hidden").text().indexOf('やや多い') != -1){
                $(this).find(".f:lt(4)").addClass('ac');
            }
            else if($(this).find(".hidden").text().indexOf('多い') != -1){
                $(this).find(".f:lt(5)").addClass('ac');
            }
            $(this).find(".hidden").hide();
        });
    });
</script>

チェックボックスで選択されたテキストを<span class="hidden">に入れて、それを参照してliにクラス名を付与したいと考えています。
選択肢に応じてクラス名を付与するliが増えていく感じです。

イメージ
少ない　■ ■ ■ ■ ■　多い

このようなレベルメーターみたいなものを実現させようとしています。

拙い説明ですが、ご助言お願いいたします。

Answer 1

チェックボックスから直接liを処理するものではないでしょうか？
また「やや多い（やや少ない）」は「多い（少ない）」を含むので文字列の比較には不向きです
いずれにしてもチェックボックスの例示が必要だとおもいます

Comments

[退会済みユーザー]

ご回答ありがとうございました。
> また「やや多い（やや少ない）」は「多い（少ない）」を含むので文字列の比較には不向きです
こちらのお言葉がヒントになり解決にいたりました。

Answer 2

以下はCSSの例になりますが、セレクタ自体はjQueryでもほぼ共通に使えるはずなので、参考にしてみてください。
https://jugedred.net/2016/01/16/173627

Comments

[退会済みユーザー]

ご回答ありがとうございました。
未知のセレクタでしたので非常に勉強になりました！

Answer 3

以下の記述で解決できました。

<script >
    $(function(){
        $('.test').each(function(){
          var str = $(this).find(".hidden").text();
            if( str === '少ない' ){
                $(this).find(".f:lt(1)").addClass('ac');
            }
            else if( str === 'やや少ない' ){
                $(this).find(".f:lt(2)").addClass('ac');
            }
            else if( str === '普通' ){
                $(this).find(".f:lt(3)").addClass('ac');
            }
            else if( str === 'やや多い' ){
                $(this).find(".f:lt(4)").addClass('ac');
            }
            else if( str === '多い'){
                $(this).find(".f:lt(5)").addClass('ac');
            }
            $(this).find(".hidden").hide();
        });
    });
  </script>