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

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

javascript jquery sorting html

使用javascript或jquery按id在ascen/desc div中排序,javascript,jquery,sorting,html,Javascript,Jquery,Sorting,Html,“我想按升序/降序对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="Fl

“我想按升序/降序对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中以下划线分隔，就像上面的div id=“FlightResult_2_142897_Y_AI_Air-India”

我认为最简单的解决方案是使用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>


$（函数（）{
$（“按钮”）。单击（函数（）{
//获取单击按钮的属性“rel”中的选项“opt”：
//1-按行程类型排序
//2-按价格排序
//3-按可退款状态排序
//4-按航空公司代码排序
//5-按航空公司全名排序
var opt=parseInt（$（this.attr（“rel”））；
var my_按钮=$（此按钮）；
$（'#main.fr'）.sort（函数（a，b）{
//输入“a”和“b”是“fr”类的2条div线。
//我们将比较这些进行排序
//获取存储在其ID属性中的“a”和“b”的信息
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输出=null；
if（$（my_按钮）.hasClass（“desc”））
返回nameB.toUpperCase（）>nameA.toUpperCase（）？1:-1；
其他的
返回nameA.toUpperCase（）>nameB.toUpperCase（）？1:-1；
});
if（$（this）.hasClass（“desc”））
$（my_按钮）。removeClass（“desc”）
其他的
$（this.addClass（“desc”）
});
});
1-FlightResult_2_142897_Y_AI_Air-India
2-飞行结果\u 1\u 122893\u Y\u AA\u美国航空公司
3-飞行结果2\U 162891\U N\U S2\U撒哈拉航空公司
4-FlightResult_1_152894_Y_9W_jJet-Airways
5-FlightResult_2_172895_N_AI_Air-India
6-FlightResult_1_192898_Y_RA_尼泊尔航空公司
按行程类型排序
按价格分类
按可退款状态排序
按航空公司代码排序
按航空公司全名排序

//首先将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>"));
}

for（var i=o；i

你自己尝试过什么吗？是什么提供了ID的动态特性？很可能你会发现，在这一点上排序比在JavaScript中更简单。为什么要进行向下投票？我认为这是一个有效的问题。这是一个声誉为1的新用户，我不认为向下投票会有帮助。事实上，我是新用户，我搜索了很多选项但是没有找到解决方案，所以我将其发布在这里，每个Div中都有Div id“FlightResult”的前缀格式，“2”是行程类型，即6位数字，即“142897”“是价格，‘Y’表示状态可退款还是不可退款，AI表示航空公司代码，印度航空公司是该航空公司的全称。因此，如果我点击价格按钮，它应该按照div id中给出的价格进行排序（升序和降序），同样对于其他每个选项，也请帮助我，如果有任何解决方案，请帮助我谢谢S.McGrady的回复，您的逻辑似乎很好，您可以再次帮助我如何对数组var div_数组进行排序=[“FlightResult_2_142897_Y_AI_Air-India”、“FlightResult_1_122893_Y_AA_American-Airlines”、“FlightResult_2_162891_Y_S2_Air-Sahara”、“FlightResult_1_152894_9W_jJet-Airways”]；按价格计算，价格在div id中用下划线分隔，提前表示感谢。使用div_数组.sort（函数（a，b）{return b-a}）；如果你想从最高价格到最低价格，只要颠倒a和b，反之亦然。它是如何工作的？它是如何将价格与“FlightResult_2_142897_Y_AI_Air-India”分开的“这并没有解决我的问题。能不能请你把完整的代码贴出来。能不能请你把例子贴出来，因为没有例子我很难实现。嗨，朋友，很抱歉我回复晚了。我修改了我以前的评论。请尝试以下代码。希望能有帮助。如果需要的话，你们可以问这个问题：）谢谢你们这么多的朋友，它真的为我的项目工作。非常感谢你，你是个天才。我会一直跟着你。欢迎你的朋友，我很乐意帮忙：）。别忘了验证答案；）