原生js实现preAll和nextAll方法

一直以来都在好奇,jquery的prevAll和nextAll方法都是咋实现的,那么厉害,而且还那么方便。不得不说,jquery真的帮我们省去了开发中手写大量js代码带来的开发进度问题,而且很好的解决了js代码的浏览器兼容性问题,对于js领域来说,真的算是一场革命性的变革。但是如果知道了原理,读懂了jquery的源码,还是会恍然大悟的。下边就贴出自己写的原生js实现preAll和nextAll的方法:

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>原生js实现preAll和nextAll方法</title>
<script>
    HTMLElement.prototype.prevAll = function(){
        var _parent = this.parentElement;
        var _child = _parent.children;
        var arr = [];
        for(var i = 0;i < _child.length;i++){
            var _childI = _child[i];
            if(_childI == this){
                break;
            }
            arr.push(_childI);
        }
        return arr;
    };

    HTMLElement.prototype.nextAll = function(){
        var _parent = this.parentElement;
        var _child = _parent.children;
        var arr = [];
        for(var i = _child.length - 1;i >= 0;i--){
            var _childI = _child[i];
            if(_childI == this){
                break;
            }
            arr.unshift(_childI);
        }
        return arr;
    };
    function foo(dom){
        console.log("prevAll:", dom.prevAll());
        console.log("nextAll:", dom.nextAll());
    }
</script>
</head>
<body>  
<ul>
    <li>我是之前元素1</li>
    <li>我是之前元素2</li>
    <li>我是之前元素3</li>
    <li onclick="foo(this)" style="cursor:pointer;">点我就可以看到效果了</li>
    <li>我是之后元素1</li>
    <li>我是之后元素2</li>
    <li>我是之后元素3</li>
    <li>我是之后元素4</li>
</ul>
</body>
</html>

是不是知道了原生js的写法,你就会觉得其实自己也可以那么高大上了!

转载于:https://www.cnblogs.com/tnnyang/p/7884487.html

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值