3

Preciso comparar duas arrays, uma com dias de um calendário e outra com dias cadastrados. Quando o dia cadastrado é correspondente ao valor da propriedade innerHTML do array de div ele deve pintar o background dessa div de preto:

HTML

<div class="calendar">
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
  <div class="item">4</div>
  <div class="item">5</div>

  ...

  <div class="item">31</div>
</div>

<div class="dias-cadastrados">
  <div class="day">4</div>
  <div class="day">21</div>

  ...
</div>

JQuery

var evento      = $(".day");
var eventos_arr = [];
var dias        = $(".item");

for (var i = 0; i < evento.length; i++) {

  eventos_arr[i] = evento[i].innerHTML;

  var count = eventos_arr[i];

  for (var y = 0; y < dias.length; y++) {

    dias[count].style.backgroundColor = "#000"; // output: Uncaught TypeError: Cannot read property 'style' of undefined 

  };

};

O algoritmo além de não fazer o que deveria retorna o erro Uncaught TypeError: Cannot read property 'style' of undefined na linha em que aplico o estilo a div. O que estou fazendo errado?

1 Resposta 1

3

Estar a misturar métodos nativos com métodos do jQuery.

Se quiseres usar jQuery usa o .each() se quiseres usar nativo ou usas [0] em cada objecto jQuery ou o document.querySelectorAll.

Para além disso acho que tens um erro no segundo loop, que é desnecessário pois nunca usas o y.

Sugiro usares assim o .map() e .get() para trocar a primeira coleção que o jQuery dá numa array, e depois usares o .filter() para ficares só com os elementos que queres, onde podes aplicar o css que queres.

var evento = $(".day");
var dias = $(".item").map(function () {
    return this.innerHTML;
}).get(); // assim ficas com uma array nativa

evento.filter(function (i) {
    return dias.indexOf(this.innerHTML) != -1;
}).css('backgroundColor', "#999");
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="calendar">
    <div class="item">1</div>
    <div class="item">2</div>
    <div class="item">3</div>
    <div class="item">4</div>
    <div class="item">5</div>...
    <div class="item">31</div>
</div>
<div class="dias-cadastrados">
    <div class="day">4</div>
    <div class="day">21</div>...</div>

Exemplo no jsFiddle também: http://jsfiddle.net/b6hb2443/

3
  • O seu algoritmo está colorindo o fundo das divs com a classe day, no entanto preciso que ele mude a cor das div com a classe item que correspondam ao número que está escrito nas divs com a classe day. Podes corrigir isso? 2/01/2015 às 22:13
  • @JoãoPauloSaragossa é assim que queres: jsfiddle.net/b6hb2443/1 ? nesse caso é só trocar as classes.
    – Sergio
    2/01/2015 às 22:19
  • 1
    Muito obrigado! 2/01/2015 às 22:48

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .