Keren Keren - 4 years ago 76
Javascript Question

Last item in the array not selected

In this script: last item is not selected to apply colorMe function

var k =0;
var userarray = [];
var dayarray = [];
var dayarray2 = [];
var dayarray3 = [];
var data = 0;
function colorMe(param,param_af,param_eve, param2)
{


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

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]);
var len = userarray.length;
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");

}
});

}


**
//This identifies the last item, can anything be done here to apply color on matching string like the rest?
**

if(data == (localStorage.size-1)){
alert("data"+data+" k= "+k+"size= "+localStorage.size+"user= "+param2+"morn= "+param+"aftr="+param_af+"eve="+param_eve);

}
k++;
}


T'm trying to color only the last item in the array. How do I do that? Here's my fiddle: https://jsfiddle.net/axpbe377/2/

HTML structure

<div id='1'>
User 1234

<div class='morning_1234'>
<span>Mon</span><span>Tue</span><span>Wed</span><span>Thrs</span><span>Fri</span><span>Sat</span><span>Sun</span>
</div>

<div class='afternoon_1234'>
<span>Mon</span><span>Tue</span><span>Wed</span><span>Thrs</span><span>Fri</span><span>Sat</span><span>Sun</span>
</div>

<div class='evening_1234'>
<span>Mon</span><span>Tue</span><span>Wed</span><span>Thrs</span><span>Fri</span><span>Sat</span><span>Sun</span>
</div>

</div>
<br/><br/>
<div id='2'>
User 4455

<div class='morning_4455'>
<span>Mon</span><span>Tue</span><span>Wed</span><span>Thrs</span><span>Fri</span><span>Sat</span><span>Sun</span>
</div>

<div class='afternoon_4455'>
<span>Mon</span><span>Tue</span><span>Wed</span><span>Thrs</span><span>Fri</span><span>Sat</span><span>Sun</span>
</div>

<div class='evening_4455'>
<span>Mon</span><span>Tue</span><span>Wed</span><span>Thrs</span><span>Fri</span><span>Sat</span><span>Sun</span>
</div>

</div>
<br/><br/>
<div id='3'>
User 9868

<div class='morning_9868'>
<span>Mon</span><span>Tue</span><span>Wed</span><span>Thrs</span><span>Fri</span><span>Sat</span><span>Sun</span>
</div>

<div class='afternoon_9868'>
<span>Mon</span><span>Tue</span><span>Wed</span><span>Thrs</span><span>Fri</span><span>Sat</span><span>Sun</span>
</div>

<div class='evening_9868'>
<span>Mon</span><span>Tue</span><span>Wed</span><span>Thrs</span><span>Fri</span><span>Sat</span><span>Sun</span>
</div>

</div>

Answer Source

https://jsfiddle.net/axpbe377/3/

<div id='1'>
  User 1234

  <div class='morning_1234'>
    <span>Mon</span><span>Tue</span><span>Wed</span><span>Thrs</span><span>Fri</span><span>Sat</span><span>Sun</span>
  </div>

  <div class='afternoon_1234'>
    <span>Mon</span><span>Tue</span><span>Wed</span><span>Thrs</span><span>Fri</span><span>Sat</span><span>Sun</span>
  </div>

  <div class='evening_1234'>
    <span>Mon</span><span>Tue</span><span>Wed</span><span>Thrs</span><span>Fri</span><span>Sat</span><span>Sun</span>
  </div>

</div>
<br/>
<br/>
<div id='2'>
  User 4455

  <div class='morning_4455'>
    <span>Mon</span><span>Tue</span><span>Wed</span><span>Thrs</span><span>Fri</span><span>Sat</span><span>Sun</span>
  </div>

  <div class='afternoon_4455'>
    <span>Mon</span><span>Tue</span><span>Wed</span><span>Thrs</span><span>Fri</span><span>Sat</span><span>Sun</span>
  </div>

  <div class='evening_4455'>
    <span>Mon</span><span>Tue</span><span>Wed</span><span>Thrs</span><span>Fri</span><span>Sat</span><span>Sun</span>
  </div>

</div>
<br/>
<br/>
<div id='3'>
  User 9868

  <div class='morning_9868'>
    <span>Mon</span><span>Tue</span><span>Wed</span><span>Thrs</span><span>Fri</span><span>Sat</span><span>Sun</span>
  </div>

  <div class='afternoon_9868'>
    <span>Mon</span><span>Tue</span><span>Wed</span><span>Thrs</span><span>Fri</span><span>Sat</span><span>Sun</span>
  </div>

  <div class='evening_9868'>
    <span>Mon</span><span>Tue</span><span>Wed</span><span>Thrs</span><span>Fri</span><span>Sat</span><span>Sun</span>
  </div>

</div>

SCRIPT

var data = [{
    user_id: 1234,
    morning: 'Sat,Sun',
    afternoon: 'Tue,Thrs,Sun',
    evening: ''
}, {
    user_id: 4455,
    morning: 'Thrs,Fri,Sun',
    afternoon: 'Tue',
    evening: 'Mon'
}, {
    user_id: 9868,
    morning: 'Tue,Wed',
    afternoon: 'Tue',
    evening: 'Fri,Sun'
}];

data.forEach(function(user) {
    var mornings = user.morning.split(',');
    var afternoons = user.afternoon.split(',');
    var evenings = user.evening.split(',');

    $("div.morning_" + user.user_id + " span").filter(function() {
        return mornings.indexOf(this.innerHTML) > -1;
    }).css('color', '#26F525');

    $("div.afternoon_" + user.user_id + " span").filter(function() {
        return afternoons.indexOf(this.innerHTML) > -1;
    }).css('color', '#26F525');

    $("div.evening_" + user.user_id + " span").filter(function() {
        return evenings.indexOf(this.innerHTML) > -1;
    }).css('color', '#26F525');
});
Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download