Sort according to price in html using java script

Question

I'm having trouble in coding a java script for ascending and descending order in html. Can some one help me. here is my html part of coding

<div class="content">
    <!-- sorting, pages -->
    <div class="list_manage">
        <div class="inner clearfix">
            <form action="#" method="post" class="form_sort"> <span class="manage_title">Sort by:</span>

                <select class="select_styled white_select" name="sort_list" id="sort_list">
                    <option value="1" data-sort="ladd">Latest Added
                        <option value="2" selected="" data-sort="price">Price High - Low
                            <option value="3" data-sort="loc">Location
                                <!--<option value="4">Names A-Z
                                <option value="5">Names Z-A-->
                </select>
            </form>
        </div>
    </div>
    <!--/ sorting, pages -->
    <!-- offers list -->
    <div class="offer_list clearfix">
        <div class="offer_item clearfix">
            <div class="offer_image"><a href="offers-details.html"><img src="images/temp/prod_img_01.jpg" alt=""></a>
            </div>
            <div class="offer_aside">
                    <h2><a href="offers-details.html">Mercedes-Benz ML 350 BlueTEC 4MATIC 7G</a></h2>

                <div class="offer_descr">
                    <p>Off-road Vehicle/Pickup Truck, Used vehicle, Automatic transmission, Diesel, 190 kW (258 PS), Fuel consumption combined: 6.8 l/100 km</p>
                </div>
                <div class="offer_data">
                    <div class="offer_price">$32.690</div> <span class="offer_miliage">55,689 KM</span>
 <span class="offer_regist">08/2011</span> 
                </div>
            </div>
        </div>
        <div class="offer_item clearfix">
            <div class="offer_image"><a href="offers-details.html"><img src="images/temp/prod_img_02.jpg" alt=""></a>
            </div>
            <div class="offer_aside">
                    <h2><a href="offers-details.html">Porsche CAYENNE S DIESEL V8 4.2</a></h2>

                <div class="offer_descr">
                    <p>Off-road Vehicle/Pickup Truck, New vehicle, Automatic transmission, Diesel, 281 kW (382 PS), Fuel consumption combined: 14.3 l/100 km</p>
                </div>
                <div class="offer_data">
                    <div class="offer_price">$56.300</div> <span class="offer_miliage">237,391 KM</span>
 <span class="offer_regist">12/2012</span> 
                </div>
            </div>
        </div>
        <div class="offer_item clearfix">
            <div class="offer_image"><a href="offers-details.html"><img src="images/temp/prod_img_03.jpg" alt=""></a>
            </div>
            <div class="offer_aside">
                    <h2><a href="offers-details.html">Infiniti FX 37 AWD Aut. S Premium</a></h2>

                <div class="offer_descr">
                    <p>Off-road Vehicle/Pickup Truck, New vehicle, Automatic transmission, Diesel, 281 kW (382 PS), Fuel consumption combined: 14.3 l/100 km</p>
                </div>
                <div class="offer_data">
                    <div class="offer_price">$47.000</div> <span class="offer_miliage">27,391 KM</span>
 <span class="offer_regist">08/2010</span> 
                </div>
            </div>
        </div>
        <div class="offer_item clearfix">
            <div class="offer_image"><a href="offers-details.html"><img src="images/temp/prod_img_04.jpg" alt=""></a>
            </div>
            <div class="offer_aside">
                    <h2><a href="offers-details.html">Volvo XC60 D5 AWD Aut. RE-Design</a></h2>

                <div class="offer_descr">
                    <p>Off-road Vehicle/Pickup Truck, New vehicle, Automatic transmission, Diesel, 281 kW (382 PS), Fuel consumption combined: 14.3 l/100 km</p>
                </div>
                <div class="offer_data">
                    <div class="offer_price">$26.750</div> <span class="offer_miliage">50,584 KM</span>
 <span class="offer_regist">05/2011</span> 
                </div>
            </div>
        </div>
        <div class="offer_item clearfix">
            <div class="offer_image"><a href="offers-details.html"><img src="images/temp/prod_img_05.jpg" alt=""></a>
            </div>
            <div class="offer_aside">
                    <h2><a href="offers-details.html">BMW X5 Adaptive Drive Head-Up Display</a></h2>

                <div class="offer_descr">
                    <p>Off-road Vehicle/Pickup Truck, New vehicle, Automatic transmission, Diesel, 281 kW (382 PS), Fuel consumption combined: 14.3 l/100 km</p>
                </div>
                <div class="offer_data">
                    <div class="offer_price">$33.300</div> <span class="offer_miliage">15,785 KM</span>
 <span class="offer_regist">10/2012</span> 
                </div>
            </div>
        </div>
        <div class="offer_item clearfix">
            <div class="offer_image"><a href="offers-details.html"><img src="images/temp/prod_img_06.jpg" alt=""></a>
            </div>
            <div class="offer_aside">
                    <h2><a href="offers-details.html">Land Rover Sport SDV6 HSE</a></h2>

                <div class="offer_descr">
                    <p>Off-road Vehicle/Pickup Truck, New vehicle, Automatic transmission, Diesel, 281 kW (382 PS), Fuel consumption combined: 14.3 l/100 km</p>
                </div>
                <div class="offer_data">
                    <div class="offer_price">$44.300</div> <span class="offer_miliage">197,391 KM</span>
 <span class="offer_regist">07/2009</span> 
                </div>
            </div>
        </div>
        <div class="offer_item clearfix">
            <div class="offer_image"><a href="offers-details.html"><img src="images/temp/prod_img_07.jpg" alt=""></a>
            </div>
            <div class="offer_aside">
                    <h2><a href="offers-details.html">Audi Q7 4.2 TDI S-LINE PANORAMA</a></h2>

                <div class="offer_descr">
                    <p>Off-road Vehicle/Pickup Truck, Used vehicle, Manual transmission, LPG & DIesel, 158 kW (215 PS), Fuel consumption combined: 8.9 l/100 km</p>
                </div>
                <div class="offer_data">
                    <div class="offer_price">$48.500</div> <span class="offer_miliage">18,085 KM</span>
 <span class="offer_regist">03/2011</span> 
                </div>
            </div>
        </div>
        <div class="offer_item clearfix">
            <div class="offer_image"><a href="offers-details.html"><img src="images/temp/prod_img_08.jpg" alt=""></a>
            </div>
            <div class="offer_aside">
                    <h2><a href="offers-details.html">Volkswagen Touareg V6 TDI R-Line</a></h2>

                <div class="offer_descr">
                    <p>Off-road Vehicle/Pickup Truck, Used vehicle, Automatic transmission, Diesel, 408 kW (555 PS), Fuel consumption combined: 15.4 l/100 km</p>
                </div>
                <div class="offer_data">
                    <div class="offer_price">$63.300</div> <span class="offer_miliage">7,785 KM</span>
 <span class="offer_regist">12/2011</span> 
                </div>
            </div>
        </div>
    </div>

I want to sort it and display only high to low price and vice-versa.

Care to share the JavaScript you already have? What exactly is your problem? — n3rd
– n3rd, Commented Jul 25, 2013 at 6:54
@n3rd i want to diplay price high to low using java script how i'll be doing that? — Echo
– Echo, Commented Jul 25, 2013 at 7:03

CodingIntrigue · Accepted Answer · 2013-07-25 07:20:27Z

1

Give this a go using jQuery .sort(), here is a fiddle.

$(function() {
    $(".offer_item").sort(function(a, b) {
        // Find the price element
        var priceAText = $(a).find(".offer_price").text();
        var priceBText = $(b).find(".offer_price").text();
        // Trim the currency symbol from the start of the text
        var priceA = parseFloat(priceAText.substring(1, priceAText.length));
        var priceB = parseFloat(priceBText.substring(1, priceBText.length));
        // Return the comparison result
        return priceA > priceB;
    }).each(function() {
      // Add all the elements back into the parent, in order
      $(this).appendTo(".offer_list");
    });
});

edited Jul 25, 2013 at 7:20

answered Jul 25, 2013 at 7:06

CodingIntrigue

79k32 gold badges176 silver badges178 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Echo Over a year ago

thanks @Blade0rz, i put it before <div class="offer_list clearfix"> , but not working what to do?

Stano Over a year ago

It would be much easier, if you generate your HTML like e.g.: <div class="offer_item clearfix" data-added="1374737546119" data-price="56300" data-location="Carolina" /> then it would very easy to sort your divs by all those attributes.

CodingIntrigue Over a year ago

@Echo As you can see from the fiddle, this code works - you need to work out where to put it to work for you, as we have no visibility of any of your other code

Collectives™ on Stack Overflow

Sort according to price in html using java script

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related