Call/link wordpress category with jquery/isotope classes

I am working on the portfolio section of my web, and these codes i have in filter.js script (in wp-includes/js folder)

jQuery(document).ready(function(){
    jQuery(".grid-item").first().addClass("comercial");
    jQuery(".grid-item:eq(1)").addClass("residencial");
    jQuery(".grid-item:eq(2)").addClass("cultural");
    jQuery(".grid-item:eq(3)").addClass("interiores");
    jQuery(".grid-item:eq(4)").addClass("residencial");
            jQuery(".grid-item:eq(5)").addClass("residencial");
    jQuery('.grid').isotope({
          itemSelector: '.grid-item',
          layoutMode: 'fitRows'
    });

    jQuery(".dcjq-parent-li ul li a").click(function() {
        jQuery(".dcjq-parent-li ul li a").removeClass("active");
        jQuery(this).addClass("active");
        var filtro=jQuery(this).attr("data-filter");
        jQuery(".grid").isotope({ filter: filtro});
    });

    jQuery(".dcjq-parent").click(function() {
        if(jQuery(this).siblings("ul").css("display")=="block")
            jQuery(this).siblings("ul").slideToggle( "slow" );
        else
        {
            jQuery(".accordionMenu ul").each(function( index ) {
                if(jQuery(this).css('display')=="block")
                {
                    jQuery(this).slideToggle( "slow" );
                    jQuery(this).siblings("a").removeClass("active");
                }
            });
            jQuery(this).siblings("ul").slideToggle( "slow" );
            jQuery(this).addClass("active");
        }
    });

});

I have the different classes in above codes, but i am not sure how to use these classes in wordpress posts or how to create a function/loop to use these classes in posts.

That code i have in my portfolio page:

<div id="aside">
    <ul id="subMenu" class="accordionMenu" data-option-key="filter">
        <li class="dcjq-parent-li">
            <a href="#" class="dcjq-parent active">Tipologia<span class="dcjq-icon"></span>
            </a>
            <ul style="display: block;">
                <li><a href="#filter" data-filter="*" class="active">todos</a></li>
                <li><a href="#filter" data-filter=".residencial">Residencial</a></li>
                <li><a href="#filter" data-filter=".comercial">Comercial</a></li>
                <li><a href="#filter" data-filter=".cultural">Cultural</a></li>
                <li><a href="#filter" data-filter=".interiores">Interiores</a></li>
            </ul>
        </li>
        <li class="dcjq-parent-li">
            <a href="#" class="dcjq-parent">Datas<span class="dcjq-icon"></span></a>
            <ul style="display: none;">
                <li><a href="#filter" data-filter="*" class="actv">todos</a></li>
                <li><a href="#filter" data-filter=".1980, .1981, .1982, .1983, .1984">1980 - 1984</a></li><li><a href="#filter" data-filter=".1985, .1986, .1987, .1988, .1989">1985 - 1989</a></li><li><a href="#filter" data-filter=".1990, .1991, .1992, .1993, .1994">1990 - 1994</a></li><li><a href="#filter" data-filter=".1995, .1996, .1997, .1998, .1999">1995 - 1999</a></li><li><a href="#filter" data-filter=".2000, .2001, .2002, .2003, .2004">2000 - 2004</a></li><li><a href="#filter" data-filter=".2005, .2006, .2007, .2008, .2009">2005 - 2009</a></li><li><a href="#filter" data-filter=".2010, .2011, .2012, .2013, .2014">2010 - 2014</a></li>
            </ul>
        </li>
    </ul>
</div>

I have done all these codes by reading the tutorials of wordpress/isotope integration, create the classes in jquery, do codes on project page and what i didn’t understand is how to use these isotope/jquery classes in wordpress posts so they will be appear as filters. I know, it could be done via category filtering, tags, metabox or custom loop but i don’t know how exactly to create the custom loop, which use the filter classes in categories.

Sorry, if i didn’t ask the question in right way, i am a beginner and trying to do everything by tutorials and by the help of experts.