jqueryで要素の範囲を指定したいのですがうまく動きません。
html
1<div class="test"> 2 <ul > 3 <li class='f'></li> 4 <li class='f'></li> 5 <li class='f'></li> 6 <li class='f'></li> 7 <li class='f'></li> 8 </ul> 9 <span class='hidden'>ここにチェックボックスのテキストが入ります</span> 10</div>
js
1<script > 2 $(function(){ 3 $('.test').each(function(){ 4 if($(this).find(".hidden").text().indexOf('少ない') != -1){ 5 $(this).find(".f:lt(1)").addClass('ac'); 6 } 7 else if($(this).find(".hidden").text().indexOf('やや少ない') != -1){ 8 $(this).find(".f:lt(2)").addClass('ac'); 9 } 10 else if($(this).find(".hidden").text().indexOf('普通') != -1){ 11 $(this).find(".f:lt(3)").addClass('ac'); 12 } 13 else if($(this).find(".hidden").text().indexOf('やや多い') != -1){ 14 $(this).find(".f:lt(4)").addClass('ac'); 15 } 16 else if($(this).find(".hidden").text().indexOf('多い') != -1){ 17 $(this).find(".f:lt(5)").addClass('ac'); 18 } 19 $(this).find(".hidden").hide(); 20 }); 21 }); 22</script>
チェックボックスで選択されたテキストを<span class="hidden">に入れて、それを参照してliにクラス名を付与したいと考えています。
選択肢に応じてクラス名を付与するliが増えていく感じです。
イメージ
少ない ■ ■ ■ ■ ■ 多い
このようなレベルメーターみたいなものを実現させようとしています。
拙い説明ですが、ご助言お願いいたします。
回答3件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
退会済みユーザー
2018/01/30 04:46