How come this JQuery loop doesn't change CSS with elements less than 4

Why doesn't this script loop trough every ul.products element and count li.product element and then change it's css(background to yellow).

When I change < to > then background color changes to all elements. So far I know that the problem is with this script checking every parent elements ul.products but is able to count li.product.

$(document).ready(function(){
   $('ul.products').each(function() {
       
        if($('li.product').length < 4){
   $("li.product").css("background-color", "yellow");
}

   });
});

EXAMPLE

https://jsfiddle.net/p9rsuhx3/2/