思路：

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. AC日记——送花 洛谷 P2073

    送花 思路: 线段树: 代码: #include <bits/stdc++.h> using namespace std; #define maxn 100005 struct TreeN ...

  2. EF Groupby

    最近做了个检索类的项目,其中就用到统计了,就是按照热门搜索排序来的. 话不多说,直接代码 var requirementSearchesOrder = app_RequirementSearches. ...

  3. Linux上安装MongoDB

    使用本教程使用.rpm 软件包在红帽企业Linux或CentOS Linux版本6和7上安装MongoDB Community Edition . 平台支持 本安装指南仅支持64位系统.详细信息请参见 ...

  4. Java之IO流的关闭

    1.在finally中关闭流: OutputStream out = null; try { out = new FileOutputStream(""); // ...操作流代码 ...

  5. hihoCoder #1831 : 80 Days-RMQ (ACM/ICPC 2018亚洲区预选赛北京赛站网络赛)

    水道题目,比赛时线段树写挫了,忘了RMQ这个东西了(捞) #1831 : 80 Days 时间限制:1000ms 单点时限:1000ms 内存限制:256MB 描述 80 Days is an int ...

  6. 深度学习应用系列（三）| autokeras使用入门

    我们在构建自己的神经网络模型时,往往会基于预编译模型上进行迁移学习.但不同的训练数据.不同的场景下,各个模型表现不一,需要投入大量的精力进行调参,耗费相当多的时间才能得到自己满意的模型. 而谷歌近期推 ...

  7. 如何用jmeter对websockt和protobuf进行压力测试

    参考代码:https://github.com/hutao722/kekexinxin 这是基于Jmeter WebsocketSampler的插件,支持对基于websocket和protobuf的服 ...

  8. WebService的网络协议

    SOAP协议.XML-RPC以及Hessian 是WebService的主要传输(编码)协议 SOAP即简单对象访问协议(Simple Object Access Protocol),它是用于交换XM ...

  9. 内存分哪些区 C++，ios，java

    韩梦飞沙 yue31313 韩亚飞 han_meng_fei_sha 313134555@qq.com C/C++编译的程序占用的内存分为以下几个部分 1.栈区(stack)—由编译器自动分配释放,存 ...

  10. POJ 2348 Euclid's Game 博弈论

    http://poj.org/problem?id=2348 顺便说,必应翻译真的好用,比谷歌翻译好用100倍. 很难判断这道题的具体博弈类型. 有两种写法,一种是找规律,一种是推理得到关系后循环(或 ...