请大家帮忙修改下这个排序

qingwadaxia_1 2020-10-17 04:19:31
<!DOCTYPE html>
<html lang="en">

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<style type="text/css">
* {
margin: 0;
padding: 0;
-moz-user-select: none;
}

li {
list-style: none;
}

.rank-start-main {
width: 500px;
margin: 0 auto;
}

span {
display: inline-block;
width: 20%;
}
</style>
</head>

<body>
<div class="rank-start-main">
<button class="sx">升序</button>
<button class="jx">降序</button>
</div>


<div class="rank-start-main rank-start-main1">
<ul>
<li>
<div>
<span><i>1</i></span>
<span>张三1</span>
<span class="xz">4836</span>
<span>36</span>
</div>
</li>

<li>
<div>
<span><i>2</i></span>
<span>李四2</span>
<span class="xz">4839</span>
<span>86</span>
</div>
</li>

<li>
<div>
<span><i>3</i></span>
<span>王五3</span>
<span class="xz">4837</span>
<span>66</span>
</div>
</li>

<li>
<div>
<span><i>5</i></span>
<span>张6</span>
<span class="xz">39</span>
<span>56</span>
</div>
</li>

<li>
<div>
<span><i>4</i></span>
<span>李1</span>
<span class="xz">68</span>
<span>26</span>
</div>
</li>

<li>
<div>
<span><i>6</i></span>
<span>王7</span>
<span class="xz">99</span>
<span>16</span>
</div>
</li>




</ul>
</div>
<script>
var sx = document.querySelector(".sx");
var jx = document.querySelector(".jx");
var xz = document.querySelectorAll(".xz");

sx.onclick = function() {

var oLi = document.getElementsByTagName('li');

var arr = [];


for (var i = 0; i < oLi.length; i++) {
arr[i] = oLi[i];
}


arr.sort(function(li1, li2) {
var n1 = parseInt(li1.innerHTML);
var n2 = parseInt(li2.innerHTML);
return n1 - n2;
})



for (var i = 0; i < arr.length; i++) {
oUl1.appendChild(arr[i]);
}
}
</script>
</body>

</html>

想根据class="xz"里的值 点击升序和降序进行升序、降序的排列，但是span里的i数字不变，始终保持1234..这种排序 请问如何修改？
...全文
9118 5 打赏 收藏 转发到动态 举报
写回复
用AI写文章
5 条回复
切换为时间正序
请发表友善的回复…
发表回复
gqkmiss 2020-10-22
  • 打赏
  • 举报
 回复
引用 4 楼 qingwadaxia_1 的回复:
[quote=引用 2 楼 天际的海浪 的回复:]

<!DOCTYPE html>
<html lang="en">

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title></title>
    <style type="text/css">
        * {
            margin: 0;
            padding: 0;
            -moz-user-select: none;
        }
        
        li {
            list-style: none;
        }
        
        .rank-start-main {
            width: 500px;
            margin: 0 auto;
        }
        
        span {
            display: inline-block;
            width: 20%;
        }
    </style>
</head>

<body>
    <div class="rank-start-main">
        <button class="sx">升序</button>
        <button class="jx">降序</button>
    </div>


    <div class="rank-start-main rank-start-main1">
        <ul>
            <li>
                <div>
                    <span><i>1</i></span>
                    <span>张三1</span>
                    <span class="xz">4836</span>
                    <span>36</span>
                </div>
            </li>

            <li>
                <div>
                    <span><i>2</i></span>
                    <span>李四2</span>
                    <span class="xz">4839</span>
                    <span>86</span>
                </div>
            </li>

            <li>
                <div>
                    <span><i>3</i></span>
                    <span>王五3</span>
                    <span class="xz">4837</span>
                    <span>66</span>
                </div>
            </li>

            <li>
                <div>
                    <span><i>5</i></span>
                    <span>张6</span>
                    <span class="xz">39</span>
                    <span>56</span>
                </div>
            </li>

            <li>
                <div>
                    <span><i>4</i></span>
                    <span>李1</span>
                    <span class="xz">68</span>
                    <span>26</span>
                </div>
            </li>

            <li>
                <div>
                    <span><i>6</i></span>
                    <span>王7</span>
                    <span class="xz">99</span>
                    <span>16</span>
                </div>
            </li>

        </ul>
    </div>
    <script>
        var sx = document.querySelector(".sx");
        var jx = document.querySelector(".jx");

        function px(n) {
            var oLi = document.getElementsByTagName('li');
            var arr = Array.prototype.slice.call(oLi);
            arr.sort(function(li1, li2) {
                var n1 = parseInt(li1.querySelector(".xz").innerHTML);
                var n2 = parseInt(li2.querySelector(".xz").innerHTML);
                return (n1 - n2)*n;
            });
            var oUl1 = document.querySelector("ul");
            for (var i = 0; i < arr.length; i++) {
                oUl1.appendChild(arr[i]);
                arr[i].querySelector("i").innerHTML = i+1;
            }
        }
        sx.onclick = function () {
        	px(1);
        }
        jx.onclick = function () {
        	px(-1);
        }
    </script>
</body>

</html>
大神，这个有点看不懂。Array.prototype.slice.call(oLi);尤其这句，还有相对简单易懂的写法吗，[/quote] b = Array.from(a) 转为数组，不转为数组的话没法用数组的排序方法
qingwadaxia_1 2020-10-22
  • 打赏
  • 举报
 回复
引用 2 楼 天际的海浪 的回复:

<!DOCTYPE html>
<html lang="en">

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title></title>
    <style type="text/css">
        * {
            margin: 0;
            padding: 0;
            -moz-user-select: none;
        }
        
        li {
            list-style: none;
        }
        
        .rank-start-main {
            width: 500px;
            margin: 0 auto;
        }
        
        span {
            display: inline-block;
            width: 20%;
        }
    </style>
</head>

<body>
    <div class="rank-start-main">
        <button class="sx">升序</button>
        <button class="jx">降序</button>
    </div>


    <div class="rank-start-main rank-start-main1">
        <ul>
            <li>
                <div>
                    <span><i>1</i></span>
                    <span>张三1</span>
                    <span class="xz">4836</span>
                    <span>36</span>
                </div>
            </li>

            <li>
                <div>
                    <span><i>2</i></span>
                    <span>李四2</span>
                    <span class="xz">4839</span>
                    <span>86</span>
                </div>
            </li>

            <li>
                <div>
                    <span><i>3</i></span>
                    <span>王五3</span>
                    <span class="xz">4837</span>
                    <span>66</span>
                </div>
            </li>

            <li>
                <div>
                    <span><i>5</i></span>
                    <span>张6</span>
                    <span class="xz">39</span>
                    <span>56</span>
                </div>
            </li>

            <li>
                <div>
                    <span><i>4</i></span>
                    <span>李1</span>
                    <span class="xz">68</span>
                    <span>26</span>
                </div>
            </li>

            <li>
                <div>
                    <span><i>6</i></span>
                    <span>王7</span>
                    <span class="xz">99</span>
                    <span>16</span>
                </div>
            </li>

        </ul>
    </div>
    <script>
        var sx = document.querySelector(".sx");
        var jx = document.querySelector(".jx");

        function px(n) {
            var oLi = document.getElementsByTagName('li');
            var arr = Array.prototype.slice.call(oLi);
            arr.sort(function(li1, li2) {
                var n1 = parseInt(li1.querySelector(".xz").innerHTML);
                var n2 = parseInt(li2.querySelector(".xz").innerHTML);
                return (n1 - n2)*n;
            });
            var oUl1 = document.querySelector("ul");
            for (var i = 0; i < arr.length; i++) {
                oUl1.appendChild(arr[i]);
                arr[i].querySelector("i").innerHTML = i+1;
            }
        }
        sx.onclick = function () {
        	px(1);
        }
        jx.onclick = function () {
        	px(-1);
        }
    </script>
</body>

</html>
大神，这个有点看不懂。Array.prototype.slice.call(oLi);尤其这句，还有相对简单易懂的写法吗，
Logerlink 2020-10-17
  • 打赏
  • 举报
 回复 

<!DOCTYPE html>
<html lang="en">

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title></title>
    <style type="text/css">
        * {
            margin: 0;
            padding: 0;
            -moz-user-select: none;
        }
        
        li {
            list-style: none;
        }
        
        .rank-start-main {
            width: 500px;
            margin: 0 auto;
        }
        
        span {
            display: inline-block;
            width: 20%;
        }
    </style>
</head>
<body>
    <div class="rank-start-main">
        <button class="sx">升序</button>
        <button class="jx">降序</button>
    </div>
    <div class="rank-start-main rank-start-main1">
        <ul>
        </ul>
    </div>
    <script>
        let arr = [
            {
                name:'张三1',
                num1:4836,
                num2:36
            },
            {
                name:'李四2',
                num1:4839,
                num2:86
            },
            {
                name:'王五3',
                num1:4837,
                num2:66
            },
            {
                name:'张6',
                num1:39,
                num2:56
            },
            {
                name:'李1',
                num1:68,
                num2:26
            },
            {
                name:'王7',
                num1:99,
                num2:16
            },
        ]
        function getHtml(arr){
            let html =''
                arr.forEach((item,index)=>{
                    debugger
                    html+=`
                    <li>
                        <div>
                            <span><i>${index}</i></span>
                            <span>${item.name}</span>
                            <span class="xz">${item.num1}</span>
                            <span>${item.num2}</span>
                        </div>
                    </li>
                    `
                });
            return html
        }
        
        document.querySelector('ul').innerHTML = getHtml(arr)


        
        var sx = document.querySelector(".sx");
        var jx = document.querySelector(".jx");
        var xz = document.querySelectorAll(".xz");
        sx.onclick = function() {
            let arrSort = arr.sort((a,b)=> {return a.num1 - b.num1})
            document.querySelector('ul').innerHTML = getHtml(arrSort)
        }
        jx.onclick = function() {
            let arrSort = arr.sort((a,b)=> {return b.num1 - a.num1})
            document.querySelector('ul').innerHTML = getHtml(arrSort)
        }
    </script>
</body>
</html>
天际的海浪 2020-10-17
  • 打赏
  • 举报
 回复 

<!DOCTYPE html>
<html lang="en">

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title></title>
    <style type="text/css">
        * {
            margin: 0;
            padding: 0;
            -moz-user-select: none;
        }
        
        li {
            list-style: none;
        }
        
        .rank-start-main {
            width: 500px;
            margin: 0 auto;
        }
        
        span {
            display: inline-block;
            width: 20%;
        }
    </style>
</head>

<body>
    <div class="rank-start-main">
        <button class="sx">升序</button>
        <button class="jx">降序</button>
    </div>


    <div class="rank-start-main rank-start-main1">
        <ul>
            <li>
                <div>
                    <span><i>1</i></span>
                    <span>张三1</span>
                    <span class="xz">4836</span>
                    <span>36</span>
                </div>
            </li>

            <li>
                <div>
                    <span><i>2</i></span>
                    <span>李四2</span>
                    <span class="xz">4839</span>
                    <span>86</span>
                </div>
            </li>

            <li>
                <div>
                    <span><i>3</i></span>
                    <span>王五3</span>
                    <span class="xz">4837</span>
                    <span>66</span>
                </div>
            </li>

            <li>
                <div>
                    <span><i>5</i></span>
                    <span>张6</span>
                    <span class="xz">39</span>
                    <span>56</span>
                </div>
            </li>

            <li>
                <div>
                    <span><i>4</i></span>
                    <span>李1</span>
                    <span class="xz">68</span>
                    <span>26</span>
                </div>
            </li>

            <li>
                <div>
                    <span><i>6</i></span>
                    <span>王7</span>
                    <span class="xz">99</span>
                    <span>16</span>
                </div>
            </li>

        </ul>
    </div>
    <script>
        var sx = document.querySelector(".sx");
        var jx = document.querySelector(".jx");

        function px(n) {
            var oLi = document.getElementsByTagName('li');
            var arr = Array.prototype.slice.call(oLi);
            arr.sort(function(li1, li2) {
                var n1 = parseInt(li1.querySelector(".xz").innerHTML);
                var n2 = parseInt(li2.querySelector(".xz").innerHTML);
                return (n1 - n2)*n;
            });
            var oUl1 = document.querySelector("ul");
            for (var i = 0; i < arr.length; i++) {
                oUl1.appendChild(arr[i]);
                arr[i].querySelector("i").innerHTML = i+1;
            }
        }
        sx.onclick = function () {
        	px(1);
        }
        jx.onclick = function () {
        	px(-1);
        }
    </script>
</body>

</html>
qingwadaxia_1 2020-10-17
  • 打赏
  • 举报
 回复
在线等。。。。。
面试之排序算法
排序算法是我们面试被问到最多的基础算法，本课程详细介绍了七种排序算法，包括插入排序、选择排序、冒泡排序、谢尔排序、快速排序、堆积排序和二路并归排序。每种算法都详细介绍了核心思想、详细步骤、时间复杂度和...
十大经典排序算法详解(三)-堆排序,计数排序,桶排序,基数排序
十大经典排序算法-堆排序,计数排序,桶排序,基数排序 1-堆排序 算法思想: 算法图解: 示例代码: 在这里插入代码片 复杂度分析: 2-计数排序 算法思想: 算法图解: 示例代码: 在这里插入代码片 复杂度分析: 3-桶排序 ...
c语言实现各种排序
欢迎大家能够点进我的文章٩(๑❛ᴗ❛๑)۶，这一篇，只是我对排序用c语言实现的一些粗糙的想法，讲的就是数据结构里面的选择排序，交换排序，插入排序啦~ヾ(✿ﾟ▽ﾟ)ノ，这里我会尽量用思路加图解的方式将每一个...
C语言文件按时间排序,帮忙-如何对文件排序啊
cout判断是否有子目录 if (FileInfo.attrib & _A_SUBDIR) { //这个语句很重要 if( (strcmp(FileInfo.name,".") != 0 ) &&(strcmp(FileInfo.name,"..") != 0)) { string newPath = folderPath + "\\" + FileInfo....
求助：修改sql2005排序规则
最近，把客户数据从sql2000导入sql2005时，出现排序规则问题，但是sql2005中，更新排序规则又需要更新系统表，自己也试了试，用dac登入，不行啊。所以如果有人知道的话，请帮忙下，告诉我怎么做，谢谢
JavaScript

87,910

社区成员

224,616

社区内容

发帖
与我相关
我的任务
社区描述
Web 开发 JavaScript
社区管理员
  • JavaScript
  • 无·法
加入社区
  • 近7日
  • 近30日
  • 至今

加载中

查看更多榜单
社区公告
暂无公告

试试用AI创作助手写篇文章吧

+ 用AI写文章