【实践】js封装 jq siblings 方法

思路:

1、获取调用元素的父元素下的所有子元素(即它的所有同辈元素和调用元素本身)

2、遍历调用元素父元素下的所有子元素 除调用元素外的所有元素保存在一个数组里面

代码如下:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>js 封装siblings 方法</title>
</head>
<body>
<div id="div1">
<p>第一个p标签</p>
<p>第二个p标签</p>
<p>第三个p标签</p>
<p>第四个p标签</p>
<p>第五个p标签</p>
</div>
<script type="text/javascript">
var div1 = document.querySelector("#div1");
var someChild = div1.querySelectorAll("p");
var siblings = siblingsOf(someChild[3]);
console.log(siblings); function siblingsOf(elem){
var len = 0;
var children = elem.parentNode.childNodes;//获取目标元素的所有兄弟元素和它自身
var siblings = new Array();
for (var i = 0 , len = children.length; i < len; i++) {
//判断此元素是一个元素节点而且不是调用元素的本身
//若为真放进数组里面
if (children[i].nodeType == 1 && children[i] != elem) {
siblings.push(children[i]);
}
}
//返回最后得出的结果数组
return siblings;
}
</script>
</body>
</html>
上一篇:MySQL两个时间相减


下一篇:day03 learning