product loading error in JQuery

Question

I have an error in JQuery code. Code must load products on the page. We clicked on the li, but homepage doesn't load the products, but other page loads there.

Here is my code:

$(function(){
    $(".product-sort ul li a").on("click",function(e){
        e.preventDefault();
        $(".product-sort ul li").removeClass("active");
        $(this).parent().addClass("active");        
        var id = $(this).attr("catid");     
         $('.product-item').hide();
        $('.product-item').each(function() {fadeIn();});
        if($(this).attr("catid") == 1) {
            $(this).fadeIn();
        }
        else {
            $(".product-item").each(function(){
                if ($(this).attr("cat") == id)
                    $(this).fadeIn();
            });
        }
    }); 

});

Answer 1

You are missing $(this) in this line:

 $('.product-item').each(function() {$(this).fadeIn();});

Answer 2

Here you are, It worked properly with me! (my div .product-item just for test)

<div class="product-sort">
    <ul id="list-category">
        <li class="active"><a href="#" catid="1">Вся продукция</a>


        <li><a href="#" catid="c1">c1</a>
        </li>
        <li><a href="#" catid="c2">c2</a>
        </li>
        <li><a href="#" catid="c3">c3</a>
        </li>
        <li><a href="#" catid="c4">c4</a>
        </li>

    </ul>
</div>
<div class="product-item" cat="c1">C11</div>
<div class="product-item" cat="c1">C12</div>
<div class="product-item" cat="c2">C21</div>
<div class="product-item" cat="c2">C22</div>
<div class="product-item" cat="c3">C31</div>
<div class="product-item" cat="c4">C41</div>
<div class="product-item" cat="c4">C42</div>

<script>
    $(function () {
        $(".product-sort ul li a").on("click", function (e) {

            e.preventDefault();
            $(".product-sort ul li").removeClass("active");
            $(this).parent().addClass("active");
            var id = $(this).attr("catid");
            $('.product-item').hide();

            $(".product-item").each(function () {
                if ($(this).attr("cat") == id)
                    $(this).fadeIn();
            });

        });

    });
</script>