思路：

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. Go语言基础单元测试示例

    这个要熟悉原理,要能写.. 但现在..... 注意,没有main函数,以_test.go结尾,命令go test -v package main import ( "testing" ...

  2. [水煮 ASP.NET Web API2 方法论]（1-3）如何接收 HTML 表单请求

    问题 我们想创建一个能够处理 HTML表单的 ASP.NET Web API 应用程序(使用 application/x-www-form-urlencoded 方式提交数据). 解决方案 我们可以创 ...

  3. vue不用webpake等环境及脚手架也可以玩

    初学时,搭环境,es6也来了,vuecil脚手架也弄了,调错,照着教程一遍一遍kei着... 然尔,实际开发中,所写的东西最后是要打包封装成软件的,为了方便其他人修改查看,不能打包成js文件... 难 ...

  4. 5.Spark Streaming流计算框架的运行流程源码分析2

    1 spark streaming 程序代码实例 代码如下: object OnlineTheTop3ItemForEachCategory2DB { def main(args: Array[Str ...

  5. onethink 路由规则无效问题解决

    修改文件 Application/Common/Conf/config.php 打开注释 //'MODULE_ALLOW_LIST' => array('Home','Admin'), // 1 ...

  6. HDU 1097.A hard puzzle-快速幂/取模

    快速幂: 代码: ll pow_mod(ll a,ll b){      ll ans=;      while(b){          ==){              ans=ans*a%mo ...

  7. [Atcoder Regular Contest 065] Tutorial

    Link: ARC065 传送门 C: 最好采取逆序贪心,否则要多考虑好几种情况 (从前往后贪心的话不能无脑选“dreamer”,"er"可能为"erase"/ ...

  8. [UOJ348]州区划分

    设$f_i$表示选状态为$i$的点的答案,$s_i$表示状态为$i$的点权和,$不存在欧拉回路g_i=[i\,不存在欧拉回路]s_i$ 那么$f_i=\sum\limits_{j\subset i}\ ...

  9. echarts 关系图graph force布局 拖动节点并固定不返回原点

    myChart.on('mouseup',function(params){var option=myChart.getOption();option.series[0].nodes[params.d ...

  10. JNI小试牛刀

    JNI: JNI是Java Native Interface的缩写,它提供了若干的API实现了Java和其他语言的通信(主要是C&C++).从Java1.1开始,JNI标准成为java平台的一 ...