如何使用jquery對列表項進行排序

Question

我做了jsfiddle。 但找不到好的解決方案。 jsFiddle鏈接

$(document).ready(function() {
   $("ul").append($("li").get().sort(function(a, b) {

      console.log("whoa");

     return parseInt($(a).attr("class").match(/\d+/), 10) 
       - parseInt($(b).attr("class").match(/\d+/), 10)
   }));
}); 

Answer 1

var $lis = $("li");

$('#numBnt').on('click', function () {
    var numericallyOrderedDivs = $lis.sort(function (a, b) {
        return $(a).text() > $(b).text();
    });
    $(".class-of-ul").html(numericallyOrderedDivs);
});  

 var $lis = $("li"); $('#numBnt').on('click', function () { var numericallyOrderedDivs = $lis.sort(function (a, b) { return $(a).text() > $(b).text(); }); $(".class-of-ul").html(numericallyOrderedDivs); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <ul class="class-of-ul"> <li class="first post-230 product type-product status-publish has-post-thumbnail product_cat-c-20-heating-ventilating-and-ac product_cat-california-online-practice-exams product_tag-pro-11 taxable shipping-taxable purchasable product-type-simple product-cat-c-20-heating-ventilating-and-ac product-cat-california-online-practice-exams product-tag-pro-11 instock"><a href="#">66</a></li> <li class="post-243 product type-product status-publish has-post-thumbnail product_cat-c-27-landscaping product_cat-california-online-practice-exams product_tag-pro-12 taxable shipping-taxable purchasable product-type-simple product-cat-c-27-landscaping product-cat-california-online-practice-exams product-tag-pro-12 instock"><a href="#">69</a></li> <li class="post-60 product type-product status-publish has-post-thumbnail product_cat-california-contractor-law-and-business-exam-study-materials product_cat-california-online-practice-exams product_tag-pro-1 taxable shipping-taxable purchasable product-type-simple product-cat-california-contractor-law-and-business-exam-study-materials product-cat-california-online-practice-exams product-tag-pro-1 instock" ><a href="#">65</a></li> <li class="last post-258 product type-product status-publish has-post-thumbnail product_cat-c-33-painting-and-decorating product_cat-california-online-practice-exams product_tag-pro-14 taxable shipping-taxable purchasable product-type-simple product-cat-c-33-painting-and-decorating product-cat-california-online-practice-exams product-tag-pro-14 instock" ><a href="#">68</a></li> <li class="first post-158 product type-product status-publish has-post-thumbnail product_cat-a-general-engineering product_cat-california-online-practice-exams product_tag-pro-3 taxable shipping-taxable purchasable product-type-simple product-cat-a-general-engineering product-cat-california-online-practice-exams product-tag-pro-3 instock" ><a href="#">67</a></li> </ul> <button id="numBnt">Sort</button> 

Answer 2

<ul class="class-of-ul">
    <li class="first post-230 product type-product status-publish has-post-thumbnail product_cat-c-20-heating-ventilating-and-ac product_cat-california-online-practice-exams product_tag-pro-11 taxable shipping-taxable purchasable product-type-simple product-cat-c-20-heating-ventilating-and-ac product-cat-california-online-practice-exams product-tag-pro-11 instock"><a href="#">66</a></li>
    <li class="post-60 product type-product status-publish has-post-thumbnail product_cat-california-contractor-law-and-business-exam-study-materials product_cat-california-online-practice-exams product_tag-pro-1 taxable shipping-taxable purchasable product-type-simple product-cat-california-contractor-law-and-business-exam-study-materials product-cat-california-online-practice-exams product-tag-pro-1 instock"><a href="#">65</a></li>
    <li class="last post-258 product type-product status-publish has-post-thumbnail product_cat-c-33-painting-and-decorating product_cat-california-online-practice-exams product_tag-pro-14 taxable shipping-taxable purchasable product-type-simple product-cat-c-33-painting-and-decorating product-cat-california-online-practice-exams product-tag-pro-14 instock"><a href="#">68</a></li>
    <li class="first post-158 product type-product status-publish has-post-thumbnail product_cat-a-general-engineering product_cat-california-online-practice-exams product_tag-pro-3 taxable shipping-taxable purchasable product-type-simple product-cat-a-general-engineering product-cat-california-online-practice-exams product-tag-pro-3 instock"><a href="#">67</a></li>
</ul>

要對下面的列表進行排序是腳本：

<script>
$(function () {
    $.fn.sortListItems = function () {
        debugger;
        var ul = $(this);
        var listitems = $('li', ul).get();
        listitems.sort(function (a, b) {
            var text1 = $(a).text().toLowerCase();
            var text2 = $(b).text().toLowerCase();
            if ($.isNumeric(text1) && $.isNumeric(text2)) {
                return (parseInt(text1) < parseInt(text2)) ? -1 : 1;
            }
            else { return (text1 < text2) ? -1 : 1; }

        });
        $.each(listitems, function (i, item) {
            ul.append(item);
        });
    }
    $(".class-of-ul").sortListItems();
});
</script>