Как использовать $ .each или альтернативу внутри цикла

Question

Код ниже (с ключом вручную) работает по желанию. Но я серьезно не могу реализовать это в процессе производства, так как я не знаю числа записей в массиве. Я заметил даже с приведенным ниже кодом, если неопределенное или нулевое значение вернулось, оно не отображает все результаты. Поэтому мне нужна одна функция, которая будет перебирать каждую запись в globalStore.data и каждый элемент внутри div.morning, .afternoon и .evening.

Не могу я просто написать следующее, где [i] представляет число записей в цикле for, но это почему бы не сработать? Это потому, что $ .each не может использоваться внутри цикла. Есть ли другой способ итерации в каждом элементе 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");}}); 

Я также попытался назвать эту функцию в течение цикла:

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

// эта функция находится вне контура для separetely.

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>"); 
} 
}); 
}); 

Answer 1

Вам нужно создать объект JSON, как сильфон, а затем ет будет работать для вас.

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"); 
     } 
    }); 
} 

Answer 2

У меня есть одно решение для вас, я не использую $.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

Answer 3

называется функцией из цикла для

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++; 

    }