JavaScript/jQuery function affecting CSS rules

Question

I am trying to write function that generates grid based on table data. The function works, but, for some reason, the classes aren't causing style change. My function looks like:

$(document).ready(function()
{
    // create 9:00 and 9:30 cells for both employees
    generateAvailabilityGrid($("#oneDay"), 30, 9, 10);
});


/* NOTE: This function works as expected. I have tested it */
// function that generates the availability grid for availabilitySchedule
// parameters: ID of container to write availability grid to (or index), size of interval block (in minutes, as integer), (optional) start time, (optional) end time
function generateAvailabilityGrid(identifier, intervalSize, floatStartTime, floatEndTime)
{
    // for good measure, define floatStartTime,floatEndTime as 9 AM,9 PM, respectively
    floatStartTime = floatStartTime || 9;
    floatEndTime = floatEndTime || 21;
    // enforce intervalSize to be greater than 10
    if (intervalSize < 10) return;
    // enforce floatSize,floatEndTime to be between 0 and 23.99
    if (((floatStartTime < 0) || (floatStartTime >= 24)) || ((floatEndTime <= 0) || (floatEndTime >= 24))) return;
    // create container div element (will serve as availabilityTable)
    var tableDiv = $('<div class="table"></div>');
    // create dummy row div, dummy cell div
    var dummyRowDiv = $('<div class="tableRow"></div>'),
        dummyCellDiv = $('<div class="tableCell"></div>');
    // get names from #employeeTable
    var names = $('#employeeTable tr:not(#titleRow)').map(function() { return $(this).children(':lt(2)').map(function() { return $(this).children('input').val(); }).get().join(" "); });
    // for every name in names
    $(names).each(
        function()
        {
            // copy dummy row and append label with name to it
            var row = $(dummyRowDiv).clone();
            row.append($("<label></label>").text(this));
            for (var m = floatStartTime * 60; m < floatEndTime * 60; m += intervalSize)
            {
                // create cells
                var tempCell = $(dummyCellDiv).clone();
                if ((m % 60 == 0) && (m > floatStartTime))
                {
                    $(tempCell).addClass('hourMark');
                }
                // have cell, on click, be marked 'available'
                $(tempCell).click(function() { $(this).toggleClass('available'); });
                // TODO: fetch data and use it to "fill" appropriate cells
                // append cells to row
                $(row).append(tempCell);
            }
            // append row to container div
            $(tableDiv).append(row);
        });
    // determine if identifier is int
    var isIntIdentifier = (identifier > -1);
    // append tableDiv to div identified by identifier
    // if identifier is int
    if (isIntIdentifier)
    {
        // use index to get container to append tableDiv to and append
        $('#availabilitySchedule :nth-child(' + (identifier + 1) + ')').append(tableDiv);
    }
    else
    {
        // get container to append tableDiv to by name and append
        $(identifier).append(tableDiv);
    }
}

The CSS rules that get "struck out" are:

.hourMark
{
    border-right: 2px solid #000;
}

.available
{
    background: #0f0;
}

I think issue with my code is the attempts to add class and mouse click listener to temp object created inside for-loop. Here is the SSCCE: https://jsfiddle.net/b73fo0z5/

Does this mean that I am going to have to define everything outside the for-loop, after the cells have been added to the table div? If so, why?

Make sure you read the helpful article Charlie mentioned in his answer -- it has more great info you could have used to solve your problem, such as using !important — cssyphus
– cssyphus, Commented Jan 17, 2016 at 15:36

charlietfl · Accepted Answer · 2016-01-17 15:38:38Z

2

The issue is that css rules are ranked by selector specificity

Your classes alone are not specific enough to rank above the default rule used to set background. This can easily be inspected in browser dev tools css inspector for any element and the rules affecting element will be shown in order of their ranking

Try

#availabilitySchedule .available
{
    background: red;
}

Helpful article https://css-tricks.com/specifics-on-css-specificity/

edited Jan 17, 2016 at 15:38

answered Jan 17, 2016 at 15:27

charlietfl

172k14 gold badges125 silver badges154 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Mike Warren Over a year ago

That did it! Now, I await opportunity to "accept" this!

Collectives™ on Stack Overflow

JavaScript/jQuery function affecting CSS rules

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related