原生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

原生js实现preAll和nextAll方法相关推荐

原生js实现addClass,removeClass,hasClass方法
第一部分:原生js实现addClass,removeClass,hasClass方法 function hasClass(elem, cls) {cls = cls || '';if (cls.rep ...
漫谈原生JS添加元素的两种方法
漫谈原生JS添加元素常规方法常规方法是首先创建一个目标元素并赋值给某个变量 ,但是元素里面内容较多,需要innerHTML赋值,将含有内容的变量赋值给目标元素的变量,最后,将这个目标元素的变量通过 ...
原生JS查找相邻元素——siblings方法
在JQuery中可以很方便地用 elem.siblings() 方法实现查找相邻元素,但在JS中并没有这样的方法,可以用previousSibling和nextSibling结合来实现. 不过在JS中 ...
原生JS替代jQuery的各种方法汇总
前端发展很快,现代浏览器原生 API 已经足够好用.我们并不需要为了操作 DOM.Event 等再学习一下 jQuery 的 API.同时由于 React.Angular.Vue 等框架的流行,直接操 ...
【数组方法大合集】原生js数组array常用工具方法大合集
var array = {/* 数组求和*/sum: arr => eval(arr.join("+")),/* 判断一个数组(支持一个字符串)里面的是否有任何一个元素被包含 ...
css原生样式支持,原生JS读写CSS样式的方法
通过Element对象的getAttribute().setAttribute().removeAttribute()直接读写style属性如:elm.setAttribute('style','c ...
用原生JS读写CSS样式的方法总结
一.可以通过DOM节点对象的style对象(即CSSStyleDeclaration对象)来读写文档元素的CSS样式如:var elm = document.getElementById('test ...
原生JS实现轮播图方法总结
方法总结: 方法一: 利用绝对定位absolute偏移量的改变来实现具有往左往右滑动的效果演示代码: 位移滑动轮播图1 方法二: 利用 display/opacity/visibility状态切换 ...
原生js实现on与off 方法
使用过jQuery的同学,应该对事件绑定方法 .on() .off() 有一定的了解. 在个人类库jTool 中实现了这两个方法,这里就来细说下原生实现方式. 实现方式以下为个人类库jTool 中 ...

原生js实现preAll和nextAll方法

原生js实现preAll和nextAll方法相关推荐

最新文章

热门文章