0

我在为 html 中的升序和降序编写 java 脚本时遇到了麻烦。有人能帮我吗。这是我编码的html部分

<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>

我想对其进行排序并仅显示从高到低的价格，反之亦然。

4

1 回答 1

1

使用 jQuery 试试看.sort()，这是一个小提琴。

$(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");
    });
});
于 2013-07-25T07:06:44.977 回答