JavaScript 对 DOM 元素排序


<!DOCTYPE html>
<html>
    <head>
        <style type="text/css">
            #wrap div {
                float: left;
            }
            #wrap:after {
                content: "";
                display: block;
                clear: both;
            }
        </style>
        <script type='text/javascript'>
            document.addEventListener('DOMContentLoaded', function () {
                var wrap = document.querySelector('#wrap');
                var div = document.querySelectorAll('#wrap div');
                var divArr = Array.prototype.slice.call(div).sort(function (a, b) {
                    return a.textContent > b.textContent ? 1 : -1;
                });
                divArr.forEach(function (p) {
                    wrap.appendChild(p);
                });
            });
        </script>
    </head>
    <body>
        <div id="wrap">
            <div>Q</div>
            <div>W</div>
            <div>E</div>
            <div>R</div>
            <div>T</div>
            <div>Y</div>
            <div>U</div>
            <div>I</div>
            <div>O</div>
            <div>P</div>
            <div>A</div>
            <div>S</div>
            <div>D</div>
            <div>F</div>
            <div>G</div>
            <div>H</div>
            <div>J</div>
            <div>K</div>
            <div>L</div>
            <div>Z</div>
            <div>X</div>
            <div>C</div>
            <div>V</div>
            <div>B</div>
            <div>N</div>
            <div>M</div>
        </div>
    </body>
</html>

 

原创文章,作者:ItWorker,如若转载,请注明出处:https://blog.ytso.com/tech/webdev/280412.html

(0)
上一篇 2022年8月13日 14:54
下一篇 2022年8月14日 13:00

相关推荐

发表回复

登录后才能评论