| 网站首页 | 业界新闻 | 小组 | 威客 | 人才 | 下载频道 | 博客 | 代码贴 | 在线编程 | 编程论坛
欢迎加入我们,一同切磋技术
用户名:   
 
密 码:  
共有 3500 人关注过本帖
标题:将目标节点内部的节点顺序进行逆序处理
只看楼主 加入收藏
Yamz
Rank: 1
等 级:新手上路
帖 子:4
专家分:0
注 册:2016-8-29
收藏
 问题点数:0 回复次数:0 
将目标节点内部的节点顺序进行逆序处理
题目:将目标节点内部的节点顺序进行逆序处理

例如:

程序代码:
<div>
        <a href="#"></a>
        <em></em>
        <p></p>
        <i></i>
        <b></b>
        <span></span>
    </div>

逆序后:

程序代码:
<div>
        <span></span>
        <a href="#"></a>
        <em></em>
        <p></p>
        <i></i>
        <b></b>
    </div>

方案1:

程序代码:
Element.prototype.nixu = function () {
            let child = this.children,
                len = child.length;           
            for (let i = len - 2; i >= 0; i--) {
                this.appendChild(child[i]);
            }
            return this;
        }
        let div = document.getElementsByTagName('div')[0];

注意i的取值,方案1,从len-i=len-2来推导i(=2)的值,因为剪切从倒数第2位开始,其索引为len-2;另外i最大值应为len,即i<=len,因为我们需要取child[0]的元素节点

方案2:

程序代码:
Element.prototype.nixu = function () {
            let child = this.children,
                len = child.length;
            for (let i = 2; i <= len; i++) {
                 this.appendChild(child[len - i]);
            }   
            return this;
        }
        let div = document.getElementsByTagName('div')[0];

总结:
appendChild()方法本质是剪切。如果元素节点已存在,那么就是将这个已存在的元素节点剪切至目的地。所以,此例中最后一个元素节点不用动,从倒数第二个开始剪切,将倒数第二个放在原来的最后一个元素节点之后,以此类推。


[此贴子已经被作者于2022-5-10 23:33编辑过]

搜索更多相关主题的帖子: 逆序 元素 this 节点 div 
2022-05-10 23:32
快速回复:将目标节点内部的节点顺序进行逆序处理
数据加载中...
 
   



关于我们 | 广告合作 | 编程中国 | 清除Cookies | TOP | 手机版

编程中国 版权所有,并保留所有权利。
Powered by Discuz, Processed in 0.031674 second(s), 9 queries.
Copyright©2004-2024, BCCN.NET, All Rights Reserved