JQuery Sorting

Sort Divs based on alpha, rating or price

by jh798268

HTML

<body>
    <div id='outer-wrapper'>
        <div id="buttons">
            <ul>
                <li class='alpha'>
                    <button id="alphBtn" class="btnSort">sort <strong>alphabetically</strong>
                    </button>
                </li>
                <li>
                    <button id="priceBtn" class="btnSortP">sort by <strong>price</strong>
                    </button>
                </li>
                <li class='omega'>
                    <button id="ratBtn" class="btnSort">sort <strong>by star rating</strong>
                    </button>
                </li>
            </ul>
        </div>
        <div id="container">
            <div class="listing">
                <header>
                    <hgroup>
                        	<h1 class="rating">Costa Adje Gran Hotel</h1>
	                        <span class="stars" data-sort='2'>2</span>

                        	<h2>Sub-heading</h2>

                    </hgroup>
                    <div class="priceBox">
                        <p>holiday price</p>
                        	<h2 class="price" data-price='80000'>80000</h2>

                    </div>
                </header>
                <div class="info">
                    <div class='switcher'><a href='#'>></a>

                    </div>
                    	<h2>3 July for 7 days from East Midlands, 2 Adults, 2 children &amp; 1 infant</h2>

                    <div class='info-inner'>
                        <p>txt 1</p>
                        <button>Book Now</button>
                    </div>
                </div>
            </div>
            <div class="listing">
                <header>
                    <hgroup>
                        	<h1 class="rating">Aquamarina Golf Hotel &amp; Apartments</h1>
	<span class="stars" data-sort='4'>4</span>

                        	<h2>Sub-heading</h2>

                    </hgroup>
                    <div class="priceBox">
                        <p>holiday...

CSS

* {
    box-sizing:border-box;
}
body {
    background:#ccc;
    background-size:cover;
    background-attachment: fixed;
    font-family: arial;
}
/* Sort Buttons */
 #buttons {
    position: relative;
    margin: 1em auto;
    width: 60%!important;
    text-align: justify;
}
#buttons ul {
    margin: 0px;
    padding: 0px;
    display: inline-block;
    width: 100%
}
#buttons ul li {
    list-style-type: none;
    margin:0 1.1em;
    padding:0;
    display: inline-block;
    width:30%;
}
button.btnSort {
    position: relative;
    padding:2em;
    background:#eeffff;
    color: #00aee1;
    border: none;
    font-size: 95%;
    width: 100%;
}
button.btnSort.active {
    background:#00aee1;
    color:#ffffff;
}
/* Layout */
 #container {
    padding:0;
    margin: 2em auto;
    position: relative;
    width:100%!important;
}
.listing {
    position: relative;
    width: 60%;
    min-height: 200px;
    background: #fff;
    margin: 2em auto;
}
header {
    position:absolute;
    z-index: 200;
    font-size: 80%;
    width: 100%;
    height:5em;
    display:table;
    color: #003399;
}
header hgroup {
    position:relative;
    float: left;
    width:80%;
    background: rgba(255, 255, 255, 0.7);
    padding:.8em;
    margin: 0;
    height:5em;
}
header h1 {
    display:inline-block;
    padding-right:1em!important;
    font-size:190%;
}
header h1, header h2 {
    margin:0;
    padding:0;
}
.priceBox {
    position: relative;
    float: right;
    width: 20%;
    background: yellow;
    padding:1em;
    margin: 0;
    height:5em;
    text-align: center;
}
.priceBox p {
    margin:0;
}
.img {
    width: 100%;
    height: 400px;
    overflow: hidden;
}
.img img {
    width: 100%!important;
    height: auto;
    position: relative;
}
/* Info Section */
 .switcher {
    position:absolute;
    right: .3em;
    font-size: 250%;
    color: white;
}
.switcher a {
    color: #fff;
    text-decoration: none;
}
.info h2 {
    background: #00aee1;
    color:#fff;
    margin:...

JavaScript

$(document).ready(function () {

    
    $(".btnSortP").click(function () {
        
        var divList = $(".listing");
        
        divList.sort(function (a, b) {
            
            var priceA=$(a).find('.price').data("price");
            var priceB=$(b).find('.price').data("price");
            
            priceA=parseFloat(priceA);
            priceB=parseFloat(priceB);
            
            return priceA < priceB
        });
        $("#container").html(divList);
    });


});