List Groups issue (2013)

Question

Alright I have built a list that targets key words (No/Yes, see attachments). The CSS changes the background color to red for no and green for yes on particular cells within the list. This works perfectly in the all docs view. Once I group by a particular column I cannot get the jQuery/css to load until the second click. The inital load shows up with no style applied, then I close it and re-open it and the style is applied (stays applied). Any ideas on how to get it to load initally?

<script type='text/javascript'>
     $(document).ready(function(){

        //All docs view functions
        $(".ms-vb2:contains(No)").addClass("no");
        $(".ms-vb2:contains(Yes, see attachment)").addClass("yes");

        //For groups view
        $('.ms-gb').click(function (e){ 
            $(".ms-vb2:contains(No)").addClass("no");
            $(".ms-vb2:contains(Yes, see attachment)").addClass("yes");
        });         
    });
</script>

<style>
.no {
    background-color: lightpink;
    text-align: center;
    border-style: solid;
    border-color: black;
    vertical-align: middle;
    font-family: Rockwell;
    font-size: 16px;
}


.yes {
    background-color: darkseagreen;
    text-align: center;
    border-style: solid;
    border-color: black;
    vertical-align: middle;
    font-family: Rockwell;
    font-size: 16px;
}
</style>

Answer 1

The problem you are facing is because SharePoint loads those groups dynamically via JavaScript, so if you are adding classes to elements, those elements don't initially exist when the page has officially finished loading, so executing on document.ready is "too soon".

I have a snippet of code I use when I need to execute something after a grouped view has finished loading. Here it is applied to your scenario:

function addCustomClasses() {
  $(".ms-vb2:contains(No)").addClass("no");
  $(".ms-vb2:contains(Yes, see attachment)").addClass("yes");
}

function addCustomClasses_WaitForGroupingToFinish()
{
    if (typeof g_ExpGroupInProgress != 'undefined' && typeof g_ExpGroupInProgress == 'boolean' && typeof g_ExpInitializing != 'undefined' && typeof g_ExpInitializing == 'boolean')
    {
        if (g_ExpGroupInProgress || g_ExpInitializing || jQuery("td[class='ms-gbload']").length > 0)
            setTimeout(addCustomClasses_WaitForGroupingToFinish, 100);
        else
            addCustomClasses();
    }
    else
        addCustomClasses();
}

$(document).ready(addCustomClasses_WaitForGroupingToFinish);