思路：

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. IA32系统级架构总览（二）

    系统级架构由寄存器.数据结构.指令组成,这些设计对基本的系统级别的操作提供了支持,比如:内存管理.终端与异常处理.任务管理.多进程控制等. 我们先来看一看寄存器与数据结构的总汇图:现在你可能看不懂,不 ...

  2. 前端读者 | 关于存储及CSS的一些技巧

    @羯瑞 HTML5存储 cookies 大小限制4K 发送在http请求头中 子域名能读取主域名的cookies 本地存储 localStorage sessionStorage 大小限制5M(注意超 ...

  3. 前端读者 | 百度前端编码规范（HTML）

    本文来自:百度FEX 1 前言 HTML 作为描述网页结构的超文本标记语言,在百度一直有着广泛的应用.本文档的目标是使 HTML 代码风格保持一致,容易被理解和被维护. 2 代码风格 2.1 缩进与换 ...

  4. 支持flv的播放神器

    h1:让浏览器支持flv去https://github.com/Bilibili/flv.js h2:让手机电脑都支持mp4使用: <link rel="stylesheet" ...

  5. vue模糊搜索&select取值

    之前vue1.0的过滤器真的很好使,但是作者为了不让搬运工变得太菜.硬是砍去了过滤器,为此,我还哭了好一阵,终于,一点一点的弄明白了过滤器是怎么回事后,也学明白了vue里的属性监听器computed以 ...

  6. 【我要学python】爬虫准备之了解基本的html标签

    HTML 标题 <h1>This is a heading</h1> HTML 段落 <p>This is a paragraph.</p> HTML ...

  7. HDU 6071 Lazy Running （同余最短路）

    Lazy Running Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 524288/524288 K (Java/Others)To ...

  8. HZAU 1205 Sequence Number（双指针）

    题目链接:http://acm.hzau.edu.cn/problem.php?id=1205 [题意]给你一串数,要求你找到两个数a[i],a[j],使得a[i]<=a[j]且j>=i且 ...

  9. 31、Flask实战第31天：cms后台修改密码

    cms后台修改密码界面布局 先创建cms_resetpwd.html页面,继承cms_base.html {% extends 'cms/cms_base.html' %} {% block titl ...

  10. 【stl小记】list

    list相当于双向链表,所以快插快删比较方便(链式数据结构的性质),但是随机读取较慢 用一道luogu的水题做一做list,code如下 #include <cstdio> #includ ...