在4x3 li网格中更改选择'li'的类

时间:2019-07-06 11:58:37

标签: jquery arrays

我的表的“关键月份”行的每个“ td”中都生成了一个12个月的“ li”网格,如下所示:

var MonthArr = ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"]
      var Monthlist = '<ul class="wrapper"><li class="boxFalse cross">' + MonthArr.join('</li><li class="boxFalse cross">') + '</li></ul>';

但是,我试图通过以下代码在选定月份中使用的“变更类”无法正常工作:

jQuery("li", Monthlist).each (function(){
          if (jQuery(this).text() == jQuery(SelectedMonthArrEach).text()) {
            jQuery(this).removeClass().addClass('boxTrue').addClass('tick');
          }  
        });

以下是合并的,相关的更新的jquery代码:

jQuery('.divResult table tbody tr td').each(function ($) {
      var MonthArr = ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"]
      var Monthlist = '<ul class="wrapper"><li class="boxFalse cross">' + MonthArr.join('</li><li class="boxFalse cross">') + '</li></ul>';

      if (jQuery(this).text() == 'Key months') jQuery(this).nextAll("td").each(function ($) {     

        var SelectedMonthArr = jQuery(this).text().split(',');
        for (i=0; i<SelectedMonthArr.length; i++){
          var SelectedMonthArrEach = SelectedMonthArr[i];
          console.log(SelectedMonthArrEach);
        }

        jQuery("li", Monthlist).each (function(){
          if (jQuery(this).text() == jQuery(SelectedMonthArrEach).text()) {
            jQuery(this).removeClass('boxFalse cross').addClass('boxTrue').addClass('tick');
          }  
        });
        console.log(Monthlist);
        jQuery(this).empty().append(Monthlist);

    });
  });

代码的有效jsfiddle在这里:https://jsfiddle.net/mithunu/hv8w6fbq/1/

请帮我解决我要去的地方!! :/

1 个答案:

答案 0 :(得分:0)

//You need to provide class names in jquery removeClass function

setTimeout(()=>{

jQuery("li.boxFalse").each (function(){
                          jQuery(this).removeClass("boxFalse cross").addClass('boxTrue').addClass('tick'); 
 });

},2000);
.boxFalse{
  color:red !important;
}

.boxTrue{
  color:green;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<ul class="wrapper"><li class="boxFalse cross">sdfds</li></ul>