原生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的写法，你就会觉得其实自己也可以那么高大上了！

posted @ 2017-11-23 13:35  豫见世家公子  阅读(764)  评论(0)  编辑  收藏  举报