Question

“我想按升序/降序对div进行排序并且div id是动态的，如

 "<div id="main">
  <div class="fr" id="FlightResult_2_142897_Y_AI_Air-India"></div>
  <div class="fr" id="FlightResult_1_122893_Y_AA_American-Airlines"></div>
  <div class="fr" id="FlightResult_2_162891_Y_S2_Air-Sahara"></div>
  <div class="fr" id="FlightResult_1_152894_Y_9W_jJet-Airways"></div>
  <div class="fr" id="FlightResult_2_172895_Y_AI_Air-India"></div>
  <div class="fr" id="FlightResult_1_192898_Y_RA_Nepal-Airlines"></div>
</div>"

div应按给定参数排序，例如它可以是'Y'，也可以是'Air-India' 这些值在以下划线分隔的div id中给出，如上面的div id =“FlightResult_2_142897_Y_AI_Air-India”

Answer 1

//首先将div id加载到一个数组中，然后根据你想要的顺序对数组进行排序，例如

var div_array = ["FlightResult_2_142897_Y_AI_Air-   India","FlightResult_1_122893_Y_AA_American-Airlines","FlightResult_2_162891_Y_S2_Air-Sahara","FlightResult_1_152894_Y_9W_jJet-Airways"];

//然后对数组进行排序

div_array.sort();

//然后添加到主div

for(var i=o; i< div_array.length ; i++)
{
   $("#main").append($("<div class='fr' id='"+ div_array[i] +"'> </div>"));
}

Answer 2

我认为最简单的解决方案是使用jQuery库和排序插件。 sort插件可以在这里找到： http://james.padolsey.com/javascript/sorting-elements-with-jquery/

如果以下代码出现问题，或者您不理解某些部分，可以向我提问。

<html>
    <head>
        <script type="text/javascript" src="./js/jquery-1.7.1.min.js"></script>
        <script type="text/javascript" src="./js/jqplugin/sort.js"></script>

        <script>
        $(function() {
            $("button").click(function() {
                // Get the option "opt" which is in the attribute "rel" of the button clicked:
                // 1 - Sort by trip type
                // 2 - Sort by price
                // 3 - Sort by refundable status
                // 4 - Sort by airline code
                // 5 - Sort by airline full name
                var opt = parseInt($(this).attr("rel"));

                var my_button = $(this);

                $('#main .fr').sort(function(a, b) {
                    // The inputs "a" and "b" are 2 div lines of class "fr". 
                    // We will compare these for sorting

                    // Get the information of "a" and "b", stored in their ID attribute
                    var infoA = $(a).attr("id").split("_");
                    var infoB = $(b).attr("id").split("_");
                    var nameA = null;
                    var nameB = null;

                    nameA = infoA[opt];
                    nameB = infoB[opt];

                    var output = null;

                    if($(my_button).hasClass("desc"))
                        return nameB.toUpperCase() > nameA.toUpperCase() ? 1 : -1;
                    else
                        return nameA.toUpperCase() > nameB.toUpperCase() ? 1 : -1;
                });

                if($(this).hasClass("desc"))
                    $(my_button).removeClass("desc")
                else
                    $(this).addClass("desc")
            });
        });
        </script>
    </head>

    <body>
        <div id="main">
          <div class="fr" id="FlightResult_2_142897_Y_AI_Air-India">1 - FlightResult_2_142897_Y_AI_Air-India</div>
          <div class="fr" id="FlightResult_1_122893_Y_AA_American-Airlines">2 - FlightResult_1_122893_Y_AA_American-Airlines</div>
          <div class="fr" id="FlightResult_2_162891_N_S2_Air-Sahara">3 - FlightResult_2_162891_N_S2_Air-Sahara</div>
          <div class="fr" id="FlightResult_1_152894_Y_9W_jJet-Airways">4 - FlightResult_1_152894_Y_9W_jJet-Airways</div>
          <div class="fr" id="FlightResult_2_172895_N_AI_Air-India">5 - FlightResult_2_172895_N_AI_Air-India</div>
          <div class="fr" id="FlightResult_1_192898_Y_RA_Nepal-Airlines">6 - FlightResult_1_192898_Y_RA_Nepal-Airlines</div>
            </div>
            <button id="sort_trip_type" rel="1">Sort By Trip Type</button>
            <button id="sort_price" rel="2">Sort By Price</button>
            <button id="sort_refund_status" rel="3">Sort By Refundable Status</button>
            <button id="sort_air_code" rel="4">Sort By Airlines Code</button>
        <button id="sort_air_name" rel="5">Sort By Airlines Full Name</button>
    </body>
</html>

使用javascript或jquery按id排序ascen / desc div

2 个答案: