0

「divを昇順/降順で並べ替えたいのですが、dividは次のように動的です。

 "<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 = "FlightResult_2_142897_Y_AI_Air-India"のように、アンダースコアで区切られたdividで指定されます。

4

2 に答える 2

1

//最初にdividを配列にロードし、次に必要な順序に従って配列を並べ替えます。

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>"));
}
于 2012-08-31T10:42:35.640 に答える
0

最も簡単な解決策は、jQueryライブラリとソートプラグインを使用することだと思います。ソートプラグインはここにあります：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>
于 2012-08-31T10:37:05.560 に答える