原生JS仿JQ的siblings()方法

muou2125
muou2125 发布于 5 天前 浏览:98 类型:原创 - 随笔 分类:JavaScript - 方法 二维码: 作者原创 版权保护
今天做项目的时候,要用原生JS写,在做菜单点击切换的时候不能用JQ的.siblings()方法了,所以就百度了一下,现在贴上来,方便以后查看。
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no"/>
	<title>Document</title>
	<style type="text/css">
		*{
			margin: 0;
			padding: 0;
			list-style: none;
		}
		.menuList li {
			width: 20%;
			float: left;
			border-bottom: 1px solid #ccc;
			font-size: 24px;
			padding: 20px 0;
			text-align: center; 
			background-color: #ccc;
		}
	</style>
</head>
<body>
	<ul class="menuList">
		<li class="menu">全部</li>
		<li class="menu">待支付</li>
		<li class="menu">待确认</li>
		<li class="menu">待入住</li>
		<li class="menu">已入住</li>
	</ul>

	<script type="text/javascript">
		function siblings(elem){ //参数elem就是想取谁的兄弟节点,就把那个元素传进去 
			var nodes=[]; //定义一个数组,用来存elem的兄弟元素 
			var previ=elem.previousSibling; 
			while(previ){ //先取o的哥哥们 判断有没有上一个哥哥元素,如果有则往下执行 previ表示previousSibling 
				if(previ.nodeType===1){ 
					nodes.push(previ); 
				} 
				previ=previ.previousSibling; //最后把上一个节点赋给previ 
			} 
			nodes.reverse(); //把顺序反转一下 这样元素的顺序就是按先后的了 
			var nexts=elem.nextSibling; //再取elem的弟弟 
			while(nexts){ //判断有没有下一个弟弟结点 nexts是nextSibling的意思 
				if(nexts.nodeType===1){ 
					nodes.push(nexts); 
				} 
				nexts=nexts.nextSibling; 
			} 
			return nodes; //最后按从老大到老小的顺序,把这一组元素返回 
		} 

		var nowMenu = document.getElementsByClassName("menu"); //获取类名
		for(var i=0; i<nowMenu.length; i++){
			nowMenu[i].index = i;  //设置下标值
			nowMenu[i].onclick = function(){
				var index = this.index;  //获取下标值
				var nowIndex = nowMenu[index];  //确认当前点击的标签
				for(var m=0; m<nowMenu.length-1; m++){
					this.style.background = "#999";  //改变当前点击元素背景
					siblings(nowIndex)[m].style.background = "#ccc";  //改变当前点击的兄弟元素背景
				}
			}
		}
	</script>
</body>
</html>
标签:
z
给个赞 0 人点赞
收藏 1 人收藏
评论 已有 0 条评论;以下用户言论只代表其个人观点,不代表 前端网(QDFuns) 的观点或立场。
登录 以后才能发表评论
最新评论
还没有任何评论呢,赶紧抢先来一发吧!
muou2125 muou2125 作者

作者最新