Filter DIV by price using jquery.

Filter DIV by price using jquery.

You can filter your div using jquery by html5 and jquery .you need to add data-price attribute on div.

HTML :

<div class="filter">

        <span class="filter-text">Filter by</span>

        <select id="filter_price" onchange="filterSystem(this.value)">

          <option default selected value="0,2730">All</option>

          <option value="0,500">$500 or less</option>

          <option value="500,1000">$500,$1000</option>

          <option value="1000,2000">$1000,$2000</option>

          <option value="2000,2730">$2001</option>

        </select>

    </div>

<!-- Content Row -->

        <div class="row" >

            <div class="col-md-3 col-xs-12 product" id="top" data-price="500">

               <a href="javascript:void(0)" id="one"><h4 class="product-title">Product Title 1</h4></a>

                <p class="starting-at">Staring at $500 </p>

                <p class="subtitle-2">Lorem ipsum dolor sit amet, consectetur adipiscing elit</p>

               <img src="images/cereal_b.jpg">

                <a class="learn-more" href="#">Learn More <span class="glyphicon glyphicon-menu-right" aria-hidden="true"></span></a>

           </div>

            <!-- /.col-md-4 -->

            <div class="col-md-3 col-xs-12 product" data-price="1900">

               <a href="javascript:void(0)" id="two">

                <h4 class="product-title">Product Title 2</h4></a>

                <p class="starting-at">Staring at 1900</p>

            

     <img src="images/flower_b.jpg">

                <a class="learn-more" href="#">Learn More 

               <span class="glyphicon glyphicon-menu-right" aria-hidden="true"></span></a>

      </div>

          <!-- /.col-md-4 -->

           <div class="col-md-3 col-xs-12 product" data-price="2730">

               <a href="javascript:void(0)" id="three">

                <h4 class="product-title">Product Title 3</h4></a>

                <p class="starting-at">Staring at 2730</p>

                <p class="subtitle-2">Cras non metus sed odio tristique imperdiet.</p>

                 <img src="images/machine_b.jpg">

<a class="learn-more" href="#">Learn More <span class="glyphicon glyphicon-menu-right" aria-hidden="true"></span></a>

</div>

 <div class="col-md-3 col-xs-12 product" data-price="731">

                <h4 class="product-title">Product Title 4</h4>

                <p class="starting-at">Staring at 731</p>

                <p class="subtitle-2">Pellentesque mattis tellus ut molestie dapibus.</p>

            <img src="images/candy_b.jpg">

                <a class="learn-more" href="#">Learn More <span class="glyphicon glyphicon-menu-right" aria-hidden="true"></span></a>

            </div>

JQuery Code :

function filterSystem(price) {

            var temp = new Array();

            // this will return an array with strings "1", "2", etc.

            temp = price.split(",");

            var minPrice;

            var maxPrice;

            for(var i=0;i<temp.length;i++){

                        minPrice = temp[0];

                        maxPrice = temp[1];

            };

            $("div.product").hide().filter(function() {

            var price = parseInt($(this).data("price"), 10);

             return price >= minPrice && price <= maxPrice;

            }).show();

}