Add styling to a webflow CMS Collection list item based on the value of a field in the CMS collection.

gistfile1.txt

 <script>
        $(function () {
           
            /**
             * What it does:
             * Style or Manipulate CMS Items returned from a collection list
             * that includes info to use as the logic for each item. 
             *  
             * Assumptions
             * You created a cms optionfield in your cms collection
             * and have a textelement in your layout that is 
             * bound to the cms optionfield from your collection.
             *   
             * In this case I have div.w-dyn-item (webflow native div item for cms collection lists)
             * with a wrapper and first child.  div.post-wrapper>div.dclass  
             * 
             * Adjust your targets as necessary to match your layout. 
             * 
             * Author: @webdev ("Jeff S") - webflow forum member
             */
            
          $("div.dclass").each(function(index, element) {
          var myclass = $(this).text(); // .dclass value (the cms option selected)
          var mytarget = $(this).parent(); // .post-wrapper
          switch (myclass) {
            // When the value I added to some cms items is "colorful"
            case "colorful":
              // add an inline style to .post-wrapper
              mytarget.css("background", "#eaeaea");
              break;

            case "fadein":
              mytarget.css("background", "#ccc").fadeIn();

              break;

            case "featured":
              // add a css class to .post-wrapper
              // where .featured or .post-wrapper.featured  class exists
              mytarget.addClass("featured");

              break;

            default:
              break;
          }
        });
      });
    </script>