【实践】js封装 jq siblings 方法

最新推荐文章于 2024-09-09 09:35:48 发布

weixin_30823683

最新推荐文章于 2024-09-09 09:35:48 发布

阅读量135

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/stitchgogo/p/6367442.html

版权

思路：

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>

转载于:https://www.cnblogs.com/stitchgogo/p/6367442.html

weixin_30823683

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
【实践】js封装 jq siblings 方法

思路：1、获取调用元素的父元素下的所有子元素（即它的所有同辈元素和调用元素本身）2、遍历调用元素父元素下的所有子元素除调用元素外的所有元素保存在一个数组里面代码如下：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> &l...
复制链接

扫一扫