思路：

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>

【实践】js封装 jq siblings 方法的更多相关文章

  1. 类似jQuery的原生JS封装的ajax方法

    一,前言: 前文,我们介绍了ajax的原理和核心内容,主要讲的是ajax从前端到后端的数据传递的整个过程. Ajax工作原理和原生JS的ajax封装 真正的核心就是这段代码: var xhr = ne ...

  2. js封装ajax的方法

    常用的ajax请求方法封装 /** * ajax请求的封装代码 */ function ajaxPost(url, params, cb) { $.ajax({ type : 'post', url ...

  3. js封装的方法

    1.JS封装就是尽量把使用的方式简单化,内部逻辑和使用解耦.通俗的说就是使用的时候只需要知道参数和返回值,其他条件尽量不要使用人员进行设置. 2.JS封装的方法有函数方式.对象的方式.闭包的方式. 举 ...

  4. 【转】第6篇：Xilium CefGlue 关于 CLR Object 与 JS 交互类库封装报告：自动注册JS脚本+自动反射方法分析

    作者: 牛A与牛C之间 时间: 2013-11-21 分类: 技术文章 | 暂无评论 | 编辑文章 主页 » 技术文章 » 第6篇:Xilium CefGlue 关于 CLR Object 与 JS ...

  5. 【转】第5篇：Xilium CefGlue 关于 CLR Object 与 JS 交互类库封装报告：自动注册JS脚本+委托回调方法分析

    作者: 牛A与牛C之间 时间: 2013-11-19 分类: 技术文章 | 暂无评论 | 编辑文章 主页 » 技术文章 » 第5篇:Xilium CefGlue 关于 CLR Object 与 JS ...

  6. JS如何封装一些列方法为一个对象的操作，然后集中管理这些操作，方便修改和调用

    var Api = { ajax:{ // 添加项目 旧! add_project : function(pro_name, html, css, js,callback) { $.post(&quo ...

  7. 基于原生JS封装数组原型上的sort方法

    基于原生JS封装数组原型上的sort方法 最近学习了数组的原型上内置方法的封装,加强了用原生JS封装方法的能力,也进一步理解数组方法封装的过程,实现的功能.虽然没有深入底层,了解源码.以下解法都是基于 ...

  8. 原生js封装的一些jquery方法

    用js封装一些常用的jquery方法 记录一下 hasClass:判断是否有class function hasClass(ele, cls) { if (!ele || !cls) return f ...

  9. iOS OC和JS的交互 javaScriptCore方法封装

    一.javaScriptCore javaScriptCore是一种JavaScript引擎,主要为webKit提供脚本处理能力,javaScriptCore是开源webkit的一部分,他提供了强大的 ...

随机推荐

  1. AngularJS之页面跳转Route

    1.除了引用AngularJs.js外,还要引用路由JS, "~/Scripts/angularjs/angular-route.js" 2.通过$routeProvider定义路 ...

  2. App Center编译React Native平台Android应用

    做React Native一段时间后,对于React Native的发布有一些了解,原本的方法都是在本地直接生成APK文件的,具体可以参考<react native 生成APK> 因为需要 ...

  3. C# For Bot Framework

    Bot Framework是一个聊天机器人的框架,背后是微软的SDK,它可以使用C#和Nodejs开发,今天我尝试用创建一个比较简单Bot 参考地址:https://docs.microsoft.co ...

  4. linux 把用户加入一个组&从这个组中移除

    # usermod -a -G www zhou // zhou这个用户现在属于两个组 zhou www # groups zhou zhou : zhou www # gpasswd -d zhou ...

  5. Eclipse中快速 打出 main方法的签名

    有时,我们创建一个空白类,需要打出main方法 public static void main(String [] args){ } 在Eclipse先敲main字符,然后按住ALT+/,再按回车即可 ...

  6. (8)go 字符串

    内建函数在 包中 1. len(str) 计算长度,中文占3个字符 2.字符串遍历,同时处理中文 package main import ( "fmt" ) func main() ...

  7. CSU 2151 集训难度【多标记线段树】

    http://acm.csu.edu.cn/csuoj/problemset/problem?pid=2151 Input 第一行三个数n,m,v0 表示有n名萌新和m次调整,初始时全部萌新的集训难度 ...

  8. Flask实战第63天：评论布局和功能实现

    评论后端逻辑实现 设计评论模型表, 编辑apps.models.py class CommentModel(db.Model): __tablename__ = 'comment' id = db.C ...

  9. 子查询在UPDATE 语句中的应用

    在UPDATE语句中可以在更新列表中以及WHERE语句使用子查询.下面演示一个将图书的出版日期全部更新为所有图书中的最新出版日期,SQL语句如下: UPDATE T_Book SET FYearPub ...

  10. Oracle 索引扫描的五种类型

    之前在讨论CBO和RBO的时候提到了索引扫描的几种类型. Oracle Optimizer CBO RBO http://blog.csdn.net/tianlesoftware/archive/20 ...