如何在循环中使用$ .each或替代

时间:2015-10-30 06:55:07

标签: javascript jquery

下面的代码(手动id键入)按预期工作。但我真的不能在生产中实现这个,因为我不知道数组中的条目数。我注意到即使使用下面的代码,如果返回undefined或null值,它也不会显示整个结果。所以我需要一个函数来迭代globalStore.data中的每个条目以及div.morning,.afternoon和.evening中的每个元素。

我不能简单地写如下,其中[i]表示for循环中的条目数;但这就是为什么不起作用?是因为$ .each不能在for循环中使用。在div .morning,.afternoon和.evening的每个元素中是否还有其他迭代方法?

 var arr = globalStore.data[i].morning;
 var arr2 = globalStore.data[i].afternoon;
 var arr3 = globalStore.data[i].evening;

    $("div.evening_"+globalStore.data[i].UUID+" span").each(function(){if(arr_ev.indexOf($(this).attr("class")) > -1) {$(this).css("color","#26F525");}}); 

我也试过在for循环中调用这个函数:

colorMe(globalStore.data[i].morning, globalStore.data[i].UUID);

//这个函数被置于for循环之外。

    function colorMe(param, param3)
    {
        console.log("DAY "+param);//this prints all the days unique to id correctly
        console.log("user "+param3);//this prints all the unique id correctly

//But when it comes to using $.each again, it doesn't return anything.

        var arr = param;
        $("div.morning_"+param3+" span").each(function() {
                    if(arr.indexOf($(this).attr("class")) > -1) {

                      //$(this).css("color","#ff0000");
                      console.log("TEXT "+$(this).text());

                    }
                });

    }

//这可行

 $(function()
    {

    var globalStore = {};
    globalStore.data = [];
    var data;
    $.when(
    $.get('/search/show_all_tutors.php',function(data){globalStore.data = globalStore.data.concat(data);console.log(data)},"json")
).then(function() {
for (i = 0; i < globalStore.data.length; i++) {


/*long procedural code starts*/
 var user = globalStore.data[0].UUID;
           var user2 = globalStore.data[1].UUID;
            var user3 = globalStore.data[2].UUID;
             var user4 = globalStore.data[3].UUID;
              var user5 = globalStore.data[4].UUID;
               var user6 = globalStore.data[5].UUID;
                var user7 = globalStore.data[6].UUID;
                 var user8 = globalStore.data[7].UUID;



         var arr = globalStore.data[0].morning;
         var arr2 = globalStore.data[1].morning;
         var arr3 = globalStore.data[2].morning;
         var arr4 = globalStore.data[3].morning;
         var arr5 = globalStore.data[4].morning;
         var arr6 = globalStore.data[5].morning;
         var arr7 = globalStore.data[6].morning;
         var arr8 = globalStore.data[7].morning;


         var arr_af = globalStore.data[0].afternoon;
         var arr2_af = globalStore.data[1].afternoon;
         var arr3_af = globalStore.data[2].afternoon;
         var arr4_af = globalStore.data[3].afternoon;
         var arr5_af = globalStore.data[4].afternoon;
         var arr6_af = globalStore.data[5].afternoon;
         var arr7_af = globalStore.data[6].afternoon;
         var arr8_af = globalStore.data[7].afternoon;

         var arr_ev = globalStore.data[0].evening;
         var arr2_ev = globalStore.data[1].evening;
         var arr3_ev = globalStore.data[2].evening;
         var arr4_ev = globalStore.data[3].evening;
         var arr5_ev = globalStore.data[4].evening;
         var arr6_ev = globalStore.data[5].evening;
         var arr7_ev = globalStore.data[6].evening;
         var arr8_ev = globalStore.data[7].evening;



        $("div.morning_"+user+" span").each(function(){if(arr.indexOf($(this).attr("class")) > -1) {$(this).css("color","#26F525");}});
         $("div.morning_"+user2+" span").each(function(){if(arr2.indexOf($(this).attr("class")) > -1) {$(this).css("color","#26F525");}});
          $("div.morning_"+user3+" span").each(function(){if(arr3.indexOf($(this).attr("class")) > -1) {$(this).css("color","#26F525");}});
           $("div.morning_"+user4+" span").each(function(){if(arr4.indexOf($(this).attr("class")) > -1) {$(this).css("color","#26F525");}});
            $("div.morning_"+user5+" span").each(function(){if(arr5.indexOf($(this).attr("class")) > -1) {$(this).css("color","#26F525");}});
             $("div.morning_"+user6+" span").each(function(){if(arr6.indexOf($(this).attr("class")) > -1) {$(this).css("color","#26F525");}});
              $("div.morning_"+user7+" span").each(function(){if(arr7.indexOf($(this).attr("class")) > -1) {$(this).css("color","#26F525");}});
               $("div.morning_"+user8+" span").each(function(){if(arr8.indexOf($(this).attr("class")) > -1) {$(this).css("color","#26F525");}});

      $("div.afternoon_"+user+" span").each(function(){if(arr_af.indexOf($(this).attr("class")) > -1) {$(this).css("color","#26F525");}});
         $("div.afternoon_"+user2+" span").each(function(){if(arr2_af.indexOf($(this).attr("class")) > -1) {$(this).css("color","#26F525");}});
          $("div.afternoon_"+user3+" span").each(function(){if(arr3_af.indexOf($(this).attr("class")) > -1) {$(this).css("color","#26F525");}});
           $("div.afternoon_"+user4+" span").each(function(){if(arr4_af.indexOf($(this).attr("class")) > -1) {$(this).css("color","#26F525");}});
            $("div.afternoon_"+user5+" span").each(function(){if(arr5_af.indexOf($(this).attr("class")) > -1) {$(this).css("color","#26F525");}});
             $("div.afternoon_"+user6+" span").each(function(){if(arr6_af.indexOf($(this).attr("class")) > -1) {$(this).css("color","#26F525");}});
              $("div.afternoon_"+user7+" span").each(function(){if(arr7_af.indexOf($(this).attr("class")) > -1) {$(this).css("color","#26F525");}});
               $("div.afternoon_"+user8+" span").each(function(){if(arr8_af.indexOf($(this).attr("class")) > -1) {$(this).css("color","#26F525");}});



        $("div.evening_"+user+" span").each(function(){if(arr_ev.indexOf($(this).attr("class")) > -1) {$(this).css("color","#26F525");}});
         $("div.evening_"+user2+" span").each(function(){if(arr2_ev.indexOf($(this).attr("class")) > -1) {$(this).css("color","#26F525");}});
          $("div.evening_"+user3+" span").each(function(){if(arr3_ev.indexOf($(this).attr("class")) > -1) {$(this).css("color","#26F525");}});
           $("div.evening_"+user4+" span").each(function(){if(arr4_ev.indexOf($(this).attr("class")) > -1) {$(this).css("color","#26F525");}});
            $("div.evening_"+user5+" span").each(function(){if(arr5_ev.indexOf($(this).attr("class")) > -1) {$(this).css("color","#26F525");}});
             $("div.evening_"+user6+" span").each(function(){if(arr6_ev.indexOf($(this).attr("class")) > -1) {$(this).css("color","#26F525");}});
              $("div.evening_"+user7+" span").each(function(){if(arr7_ev.indexOf($(this).attr("class")) > -1) {$(this).css("color","#26F525");}});
               $("div.evening_"+user8+" span").each(function(){if(arr8_ev.indexOf($(this).attr("class")) > -1) {$(this).css("color","#26F525");}});     
/*ends*/

$("#contents").append("<div class='small-12 medium-12 large-12 columns text-left'> Availability:</div><div class='small-6 medium-6 large-6 columns text-left day morning_"+globalStore.data[i].UUID+"' id='"+globalStore.data[i].UUID+"'>Morning: <span class='Mon'>M </span><span class='Tue'>T </span><span class='Wed'>W </span><span class='Thrs'>T </span><span class='Fri'>F </span><span class='Sat'>S </span><span class='Sun'>S</span></div><div class='small-6 medium-6 large-6 columns text-left day afternoon_"+globalStore.data[i].UUID+"' id='"+globalStore.data[i].UUID+"'>Afternoon: <span class='Mon'>M </span><span class='Tue'>T </span><span class='Wed'>W </span><span class='Thrs'>T </span><span class='Fri'>F </span><span class='Sat'>S </span><span class='Sun'>S</span></div><div class='small-6 medium-6 large-6 columns text-left day evening_"+globalStore.data[i].UUID+"' id='"+globalStore.data[i].UUID+"'>Evening: <span class='Mon'>M </span><span class='Tue'>T </span><span class='Wed'>W </span><span class='Thrs'>T </span><span class='Fri'>F </span><span class='Sat'>S </span><span class='Sun'>S</span></div>");
}
});
});

3 个答案:

答案 0 :(得分:1)

我有一个解决方案,我没有使用$.each,但您不需要为重复颜色编写重复代码

你可以在你的成功承诺块中调用一个函数

.then(function() {
for (i = 0; i < globalStore.data.length; i++) {

CheckAvailability(globalStore.data[i].UUID,globalStore.data[0].morning,globalStore.data[i].afternoonon,globalStore.data[i].evening)

//here your other code
}

定义一个像这样的函数

function CheckAvailability(User,morning,afternoon,evening){
$("div.morning_"+User+" span").each(function(){
      if(morning.indexOf($(this).attr("class")) > -1) {
       $(this).css("color","#26F525");
    }
});


$("div.afternoon_"+User+" span").each(function(){
      if(afternoon.indexOf($(this).attr("class")) > -1) {
       $(this).css("color","#26F525");
    }
});

$("div.evening_"+User+" span").each(function(){
      if(evening.indexOf($(this).attr("class")) > -1) {
       $(this).css("color","#26F525");
    }
});
}

here the fiddle with single value

答案 1 :(得分:0)

您需要像bellow一样创建json对象,然后ut将为您工作。

var users =  [{
            name: 'aa11',
            morning: 'Tue,Wed,Thrs,Mon',
            afternoon: 'Fri,Sat',
            evening: 'Tue,Mon'
        },
        {
            name: 'bb22',
            morning: 'Tue,Wed,Mon',
            afternoon: 'Fri,Mon',
            evening: 'Fri,Mon'
        },
        {
            name: 'cc33',
            morning: 'Tue,Wed,Fri',
            afternoon: 'Sun,Sat',
            evening: ''
        }
    ];

for (i = 0; i < users.length; i++) {
    morning = users[i].morning.split(",");
    afternoon = users[i].afternoon.split(",");
    evening = users[i].evening.split(",");
    user = users[i].name;

    $("div.morning_" + user + " span").each(function () {

        if (morning.indexOf($(this).attr("class")) > -1) {
            $(this).css("color", "#26F525");
        }
    });
    $("div.afternoon_" + user + " span").each(function () {
        if (afternoon.indexOf($(this).attr("class")) > -1) {
            $(this).css("color", "#26F525");
        }
    });
    $("div.evening_" + user + " span").each(function () {
        if (evening.indexOf($(this).attr("class")) > -1) {
            $(this).css("color", "#26F525");
        }
    });
}

答案 2 :(得分:0)

从for循环中调用一个函数

colorMe(globalStore.data[i].morning,globalStore.data[i].afternoon,globalStore.data[i].evening, globalStore.data[i].UUID);   

//定义了一个函数

function colorMe(param,param_af,param_eve, param2)
    {

        /*console.log("DAY "+param);
        console.log("user "+param2);*/
       /* console.log("K+ "+k);*/

        userarray.push(param2);
        //console.log("mY "+userarray[k]);
        dayarray.push(param);
        dayarray2.push(param_af);
        //console.log("afternoon "+dayarray2[k]);
        dayarray3.push(param_eve);
        console.log("evening "+dayarray3[k]);
        //console.log("Day "+dayarray[k]);
        //console.log("k="+ k);

        for(;data<k;data++)
        {
            //console.log("data="+ data);
        var arr = dayarray[data];
        var arr2 = dayarray2[data];
        var arr3 = dayarray3[data];
        $("div.morning_"+userarray[data]+" span").each(function() {
                    if(arr.indexOf($(this).attr("class")) > -1) {

                      $(this).css("color","#26F525");

                    }
                });

                $("div.afternoon_"+userarray[data]+" span").each(function() {
                    if(arr2.indexOf($(this).attr("class")) > -1) {

                      $(this).css("color","#26F525");

                    }
                });
                $("div.evening_"+userarray[data]+" span").each(function() {
                    if(arr3.indexOf($(this).attr("class")) > -1) {

                      $(this).css("color","#26F525");

                    }
                });

        }
        k++;

    }