就是求元素在父级当中的位置：

思路：

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Title</title>
  6. </head>
  7. <body>
  8. <ul id="a">
  9.     <li id="foo">foo</li>
  10.     <li id="bar">bar</li>
  11.     <li id="baz">baz</li>
  12. </ul>
  13. </body>
  14. </html>
  15. <script type="text/javascript">
  16.     function a(obj) {
  17.         var b = obj.parentNode.children;
  18.         var i=0;
  19.         for(i=0;i<b.length;i++){
  20.             if(b[i] == obj){
  21.                 return i;
  22.             }
  23.         }
  24.     }
  25.     window.onload = function () {
  26.         var li = document.getElementsByTagName("li")
  27.         var i=0;
  28.         for(i=0;i<li.length;i++){
  29.             li[i].onclick = function () {
  30.                 alert(a(this));
  31.             }
  32.  
  33.         }
  34.     }
  35. </script>

封装：

  1. //index,求元素在父级当中的位置
  2. function getIndex(obj) {
  3.     var aBrother = obj.parentNode.children;
  4.     var i=0;
  5.     for(i=0;i<aBrother.length;i++){
  6.         if(aBrother[i] == obj){
  7.             return i;
  8.         }
  9.     }
  10. }
  11. VQuery.prototype.index = function () {
  12.     return getIndex(this.elements[0]);
  13. };

详细可查VQuery的封装。

index封装的更多相关文章

  1. html/京东项目/京东网页高仿/js/jq/css/java web/

    登录部分HTML+CSS: <!DOCTYPE html><html>    <head>        <meta charset="UTF-8& ...

  2. 瀑布流 &留言板

    实例:瀑布流 留言板(一)瀑布流瀑布流实现原理分析1.ajax文件内容function ajax(method, url, data, success) {    var xhr = null;   ...

  3. js仿京东轮播图效果

    <!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8&qu ...

  4. HTML番外整理

    经过一周的个人项目与一周的团体项目,我学到了一些有用的内容,特分享如下: 一.视频 1.对在线视频的添加 在各大网站打开一个视频,在下方的分享找到HTML代码,然后复制HTML代码到自己的代码中. 2 ...

  5. JS轮播图

    <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" ...

  6. springmvc 例

    1.结构 watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvaXRscWk=/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCM ...

  7. HTML中插入视频

    最常用的向HTML中插入视频的方法有两种,一种是古老的<object></object>标签,一种是html5中的<video></video>标签. ...

  8. Java斗地主案例、异常和自定义异常整理

    模拟斗地主洗牌发牌 1.1 案例介绍 按照斗地主的规则,完成洗牌发牌的动作. 具体规则: 1. 组装54张扑克牌 2. 将54张牌顺序打乱 3. 三个玩家参与游戏,三人交替摸牌,每人17张牌,最后三张 ...

  9. 基于cytoscape.js 、 d3.js实现的关系图谱初级版本

    前面的文章已经介绍了cytoscape.js . d3.js的安装及简单demo,现在展示从html页面转移到vue项目下的最初版的demo 效果图: 代码如下: <template> & ...

随机推荐

  1. msado.tli

    // Created by Microsoft (R) C/C++ Compiler Version 10.00.40219.01 (d0b01b1b).//// e:\threadpool\mysq ...

  2. Linux环境进程间通信（一）

    1. 管道概述及相关API应用 1.1 管道相关的关键概念 管道是Linux支持的最初Unix IPC形式之中的一个.具有下面特点: 管道是半双工的,数据仅仅能向一个方向流动.须要两方通信时.须要建立 ...

  3. IntelliJ IDEA 学习（一）：IntelliJ IDEA15 破解方法（已验证）

    新的破解方法: 1.进到文件夹中:C:\Windows\System32\drivers\etc ,找到hosts文件,用记事本编辑 2.如果没有找到hosts文件,可在查看设置中勾选“显示隐藏的项目 ...

  4. java遍历实体类的属性和数据类型以及属性值

    遍历实体类的树形和数据类型一级属性值 /** * 遍历实体类的属性和数据类型以及属性值 * @param model * @throws NoSuchMethodException * @throws ...

  5. 微信小程序请求wx.request数据,渲染到页面

    先说一下基本使用.官网也有. 比如说你在App.js里面有这些变量.想修改某些值. data: { main_view_bgcolor: "", border: "&qu ...

  6. cxf动态调用webservice设置超时，测试线程安全

    Java代码 import java.util.Random; import java.util.concurrent.ArrayBlockingQueue; import java.util.con ...

  7. 解决The markup in the document following the root element must be well-formed.

    出现问题的代码: <security-constraint> <web-resource-collection> <web-resource-name>Regist ...

  8. 偏于SQL语句的 sqlAlchemy 增删改查操作

    ORM 江湖 曾几何时,程序员因为惧怕SQL而在开发的时候小心翼翼的写着sql,心中总是少不了恐慌,万一不小心sql语句出错,搞坏了数据库怎么办?又或者为了获取一些数据,什么内外左右连接,函数存储过程 ...

  9. TortoiseGit状态图标不能显示

    一开始网上搜到的办法基本都一样,都试过了,没有效果: 办法一: 注册表中找到 HKEY_LOCAL_MACHINE\Software\Microsoft\Windows\CurrentVersion\ ...

  10. 超赞的lua开发工具zerobrane

    zerobrane是用lua和wxWidgets编写的ide,而且是跨平台的,支持多种lua解释器,包括love2d. 而且最赞的是支持即时编程,可以在运行时直接修改变量,直接看到结果,不用重新运行, ...