ui li排序-CSDN博客

本文链接：https://blog.csdn.net/tanxuefeng11/article/details/45225925

厂里放假期间，迫于生计，去一家公司电脑公司面试。我说我有作品，给看。人家不要。上机答题。可能他们的系统是aspx的吧，时间更新可能要到后台，导致页面卡的要死。我反思，大家为了效率，动不动框架掌握的如何，不问项目经验，水平深度。可能有时候为了速度，大量的aspx控件，不停的通过后台交互，编写简单，用的好用，就是卡。我想我们应该了解一下框架的原理就行了，没有必要实际使用。前台的javascript 写的控件和少量的ajax交互就行了。为了炫没速度不值。另外我建议考试应该开卷，可以上网，人不是机器，有的东西记不住正常，只要通过自己的资料或网上的资料能把问题解决了就行。考题有：网络通信的分层。我记不住，因为我不是网络驱动编写的，但我能找到tcp/ip协议的电子书，里边各种细节是记不住的，知道原理和大概就行了。字符串模式匹配的算法。简单，但如果长时间不编写特定语言的程序，简单的输入输出你可能都忘了，知道原理就行。kmp,让我写，不行。但我10年前研究透了，长时间不用，忘了。现在要写，我还得看看数据结构的书，半小时能写出来。我写了javascript 和c#版的对任意字符串的4舍弃6入5留双，改正了round函数不能满足质检分析的要求，javascript版用状态图，c#版用正则表达式。一个算法想了3天。现在1年不看，我都看不懂我写的代码了。人是容易遗忘的，事情最后留下的只是经验和大体上的记忆。
今天看到csdn上的博客门的高手写教程，我很感激，有东西能有地方找，为了锻炼自己。分享一家公司的面试题目。
是排序ul下的li.现在贴出来，给大家一点参考。

<html>
<head>
    <title></title>
    <script type="text/jscript" src="jquery-1.11.1.js">     
    </script>

</head>
<body>
    <ul id="ul">
        <li>2</li>
        <li>4</li>
        <li>1</li>
        <li>3</li>
        <li>5</li>
        <li>7</li>
        <li>6</li>
    </ul>
    <br />
    <button id="StrAdd" onclick='StrAdd_onclick("src")'>
        升序</button>
    <button id="Strjian" onclick='StrAdd_onclick("desc")'>
        降序</button>
</body>
</html>

完成排序，当时我习惯了asp.net c# 的人，习惯控件写法，用前台还不习惯。幸好我看过jquery源码分析的书，虽然不用它编写，但看的懂jquery.老板讲可以上网，网上一搜，jquery ul 排序，百度知道里有人给了个排序，只有升序。好，虽然不一样，但改改代码还能复用一部分。不用我自己，取dom用jquery 全部搞定。

<html>
<head>
    <title></title>
    <script type="text/jscript" src="jquery-1.11.1.js">     
    </script>
    <script type="text/javascript">
     $(function(){

         $("#StrAdd").click(function () {
             var ols = new Object();
             var ts = new Array();
             $("#ul").find("li").each(function (i, v) {
                 var sp = $(v).text();
                 ts.push(sp);
                 ols[sp] = $(v);
             });
             ts.sort(); //数组的内部排序       
             $("#ul").empty();
             for (var k = 0; k < ts.length; k++) {
                 ols[ts[k]].appendTo($("#ul"));
             }
         });






      }) 
   </script>

</head>
<body>
    <ul id="ul">
        <li>2</li>
        <li>4</li>
        <li>1</li>
        <li>3</li>
        <li>5</li>
        <li>7</li>
        <li>6</li>
    </ul>
    <br />
    <button id="StrAdd" onclick='StrAdd_onclick("src")'>
        升序</button>
    <button id="Strjian" onclick='StrAdd_onclick("desc")'>
        降序</button>
</body>
</html>

但降序呢。网上搜一下 Array.sort(),原来排序还可以给个比较函数。C，c++语言有比较，javascript也有，太周到了！

<html>
<head>
    <title></title>
    <script type="text/jscript" src="jquery-1.11.1.js">     
    </script>
    <script type="text/javascript">
     $(function(){

         $("#StrAdd").click(function () {
             var ols = new Object();
             var ts = new Array();
             $("#ul").find("li").each(function (i, v) {
                 var sp = $(v).text();
                 ts.push(sp);
                 ols[sp] = $(v);
             });
             ts.sort(); //数组的内部排序       
             $("#ul").empty();
             for (var k = 0; k < ts.length; k++) {
                 ols[ts[k]].appendTo($("#ul"));
             }
         });

         function desc(x, y) {
             if (x > y)
                 return -1;
             else
                 return 1;
         }




         $("#Strjian").click(function () {
             var ols = new Object();
             var ts = new Array();
             $("#ul").find("li").each(function (i, v) {
                 var sp = $(v).text();
                 ts.push(sp);
                 ols[sp] = $(v);
             });
             ts.sort(desc); //数组的内部排序       
             $("#ul").empty();
             for (var k = 0; k < ts.length; k++) {
                 ols[ts[k]].appendTo($("#ul"));
             }
         });



      }) 
   </script>

</head>
<body>
    <ul id="ul">
        <li>2</li>
        <li>4</li>
        <li>1</li>
        <li>3</li>
        <li>5</li>
        <li>7</li>
        <li>6</li>
    </ul>
    <br />
    <button id="StrAdd" onclick='StrAdd_onclick("src")'>
        升序</button>
    <button id="Strjian" onclick='StrAdd_onclick("desc")'>
        降序</button>
</body>
</html>

虽然用记事本写，但这么容易搞定，连学到的快速排序，冒泡排序都没用上，特感觉自豪,这就是用框架的好处，不必重复造车轮，提高生产力和稳定性。StrAdd_onclick(“src”)根本都没用,因为不必要在dom中写javascript，代码和页面元素分开是我的一个习惯，分类存放，好找也好修改.
时间过了一段，闲下来一看这个代码，虽然老板也不懂，但了解了它的算法后感觉有问题。如果有两个一样的li,在对象上操作会覆盖掉旧的。如果li中还有其它东西，比较dom肯定不实际。实际的东西应该考虑到各种情况，代码要通用。应该改为如下才正确。

function customFunc(x,y){
    var xValue=$(x).attr("valueByOrder") ;//<li valueByOrder="25"></li>
    var yValue=$(y).attr("valueByOrder") ;
   if xValue>yValue
     return 1;
   else 
    return -1;
}
 $("#Strjian").click(function () {           
             var ts = new Array();
             $("#ul").find("li").each(function (i, v) {                
                 ts.push(v);                
             });
             ts.sort(customFunc); //数组的内部排序     
             $("#ul").empty();
             for (var k = 0; k < ts.length; k++) {
                $(ts[k]).appendTo($("#ul"));
             }
});

以上代码没有测试，只是表达出自己的想法而已，可能有bug,不打算用。没这样的需求，对于ExtJs框架，这些一点用都没有，人家已经给你封装好了。有点遗憾的是商业要钱。没有免费的午餐呀，人家辛苦也不容易，体谅框架编写者，又要掉多少头发，伤多少脑细胞干重复的coder。对于一个问题，知道怎样解决就行了，不必要花费太多的时间在没有创意的重复上。

5年后，随着我代码的熟练，在网上看到别的高手给出的解答，知道什么叫牛人了。该代码绝对牛逼，光分析代码用了我1个小时。
https://j11y.io/javascript/sorting-elements-with-jquery/

我的测试：

<html>
<script  src="jquery-1.9.1.min.js">
</script>
<script>
/**
 * jQuery.fn.sortElements
 * --------------
 * @param Function comparator:
 *   Exactly the same behaviour as [1,2,3].sort(comparator)
 *   
 * @param Function getSortable
 *   A function that should return the element that is
 *   to be sorted. The comparator will run on the
 *   current collection, but you may want the actual
 *   resulting sort to occur on a parent or another
 *   associated element.
 *   
 *   E.g. $('td').sortElements(comparator, function(){
 *      return this.parentNode; 
 *   })
 *   
 *   The <td>'s parent (<tr>) will be sorted instead
 *   of the <td> itself.
 */
jQuery.fn.sortElements = (function(){

    var sort = [].sort;

    return function(comparator, getSortable) {

        getSortable = getSortable || function(){return this;};

        var placements = this.map(function(){

            var sortElement = getSortable.call(this),
                parentNode = sortElement.parentNode,

                // Since the element itself will change position, we have
                // to have some way of storing its original position in
                // the DOM. The easiest way is to have a 'flag' node:
                nextSibling = parentNode.insertBefore(
                    document.createTextNode(''),
                    sortElement.nextSibling
                );

            return function() {

                if (parentNode === this) {
                    throw new Error(
                        "You can't sort elements if any one is a descendant of another."
                    );
                }

                // Insert before flag:
                parentNode.insertBefore(this, nextSibling);
                // Remove flag:
                parentNode.removeChild(nextSibling);

            };

        });

        return sort.call(this, comparator).each(function(i){
            placements[i].call(getSortable.call(this));
        });

    };

})();

$(function(){
        $('li').sortElements(function(a, b){
            return $(a).text() > $(b).text() ? 1 : -1;
        });


});
</script>

<body>
<ul>
    <li>Banana</li>
    <li>Carrot</li>
    <li>Apple</li>
</ul>
</body>

</html>