how to select specific multiple divs inside other div and change their color

Question

I need to create a calender and let the user choose specific hours (like microsoft outlook) I able to choose all the divs under a certain day and change their color, but not the specific hours, (I add 50 in every loop and later will convert it to 30 (half hour)).

This is my code :

  <div id="majorDiv"></div> //html

javascript

    var Days = ["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"];
    var hakfHours = 48;
    var hours = "";



$(document).ready(function () {

        createCalendarDiv();
        var hh = "";
        $("#majorDiv").selectable({
            selected: function (event, ui) {
                hh = $(ui.selected.children);
                hh.css("background-color", "purple");

            }
        });

    });


        function createCalendarDiv() {
            var html = "";
            for (var i = 0; i < Days.length; i++) {
                html = "<div id='" + Days[i] + "' style='float:left;width:150px;background-    
color:pink'>" + Days[i];
                hours = 100;
                for (var k = 0; k < hakfHours; k++) {
                    html += "<div id='" + hours + "' rel='sub' style='background-color:yellow;width:150px;border:solid;border-color:greenyellow;border-width:2px'>" + hours + "</div>";
                    hours += 50;
                }
                html += "</div>";
                $("#majorDiv").append(html);
            }
        }

How to choose specific divs/ hours like - 0450->0750. and by choosing changing the divs color?

Answer 1

The filter function is jQuery is the one you are looking for. It makes it possible to do more advanced filtering when the regular selectors doesn't work out for you. Some other thoughts:

1) The id must start with a letter (not a number as in your case)

2) Set the hour in an attribute instead, eg data-hour.

Havn't test run this code so there might be some improvements. It presumes you have set the hour in the attribute "data-hour". Could also be done with data() to make it slicker. Also you need to modify the selector at the start to select all the hour divs.

var start = 450;
var end = 750;
$('#majorDiv hour-selector').filter(function(index) {
    var hour = parseInt(this.attr('data-hour'));
    return (hour >= start && hour <= end);
}).css( "background-color", "red" );

Another suggestion for improvement to your code would be to use an array and push in new html. At the end you join them together. This is done to avoid the string concatination.

Answer 2

working example http://jsfiddle.net/s9z8A/2/ I select some hours in Monday column as you can see in changeMonday function

    var Days = ["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"];
    var hakfHours = 48;
    var hours = "";



$(document).ready(function () {

        createCalendarDiv();
        var hh = "";
        $("#majorDiv").selectable({
            selected: function (event, ui) {
                hh = $(ui.selected.children);
                hh.css("background-color", "purple");

            }
        });
changeMonday();
    });


        function createCalendarDiv() {
            var html = "";
            for (var i = 0; i < Days.length; i++) {
                html = "<div id='" + Days[i] + "' style='float:left;width:150px;background-color:pink'>" + Days[i];
                hours = 100;
                for (var k = 0; k < hakfHours; k++) {
                    html += "<div id='" + hours + "' rel='sub' style='background-color:yellow;width:150px;border:solid;border-color:greenyellow;border-width:2px'>" + hours + "</div>";
                    hours += 50;
                }
                html += "</div>";
                $("#majorDiv").append(html);
            }
        }

function changeMonday(){
    $('#Monday div').filter(function(index,elem) {
    var range = parseInt($(elem).attr('id'));
    return (range >= 550 && range <= 650);
}).css( "background-color", "green" );
}

html

 <div id="majorDiv"></div>