jQuery更改特定li元素的类基于JSON数组输入

时间:2019-07-05 11:13:49

标签: jquery arrays

我正在建立一个动态表,其中的月份显示为一行。该行中的每个“ td”都将有一个为期12个月的“ li” ccs网格,在此我尝试将某些类别应用于某些月份。要突出显示的月份来自用于填充网格的JSON数组。

但是,jquery无法正常工作,并且我收到的控制台错误是“ li is not defined”。

我最初要创建一个具有特定类的12个月的“ li”网格,如下所示:

var MonthArr = ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"]
    var MonthList = jQuery('ul.wrapper')
    jQuery.each(MonthArr, function(i){
      var li = jQuery('<li>').addClass('boxFalse').addClass('cross').appendTo(MonthList);      
    })

关于这一点,我试图更改数组中提到的特定月份的类的更改:

if (jQuery(this).text() == 'Best months to visit') jQuery(this).nextAll("td").each(function ($) {
        var SelectedMonthArr = jQuery(this).text().split(',');
        for (i=0; i<SelectedMonthArr.length; i++){
          var SelectedMonthArrEach = SelectedMonthArr[i];
        }
        jQuery(MonthList > li).each (function(){
          if (jQuery(this).text() == SelectedMonthArrEach.text()) {
            jQuery(this).removeClass().addClass('boxTrue').addClass('tick');
          }  
        });
        console.log(MonthList);
        jQuery(this).empty().append(MonthList);
    });

此特定练习的合并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 = jQuery('ul.wrapper')
    jQuery.each(MonthArr, function(i){
      var li = jQuery('<li>').addClass('boxFalse').addClass('cross').appendTo(MonthList);      
    })

      if (jQuery(this).text() == 'Best months to visit') jQuery(this).nextAll("td").each(function ($) {
        var SelectedMonthArr = jQuery(this).text().split(',');
        for (i=0; i<SelectedMonthArr.length; i++){
          var SelectedMonthArrEach = SelectedMonthArr[i];
        }
        jQuery(MonthList > li).each (function(){
          if (jQuery(this).text() == SelectedMonthArrEach.text()) {
            jQuery(this).removeClass().addClass('boxTrue').addClass('tick');
          }  
        });
        console.log(MonthList);
        jQuery(this).empty().append(MonthList);
    });
  });

我需要更改特定“ li”的类,但是这没有发生。

请帮我解决我要去哪里。 整个代码的JSFiddle在这里:https://jsfiddle.net/91egL48c/1/

1 个答案:

答案 0 :(得分:0)

从我所拥有的代码中可以看到

 jQuery(MonthList > li).each (function(){

li将是一个变量,>将是一个运算符,您需要

 MonthList.find('> li').each(function() {

demo