您的位置：首页 > Web前端 > JavaScript

原生js实现preAll和nextAll方法

2017-11-23 13:35 651 查看

一直以来都在好奇，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的写法，你就会觉得其实自己也可以那么高大上了！

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航