javascript - Vanilla js 替代 jQuery 的 index() 和 eq()

Question

我正在将网页旧版基于 jQuery 的 DOM 操作转换为普通 javascript，大多数操作都出奇地简单，但弹出菜单却遇到了困难。

我们使用选项卡和隐藏菜单 div 的简单格式:

 <div class="tab">tab 1</div>
 <div class="tab">tab 2</div>
 <div class="tab">tab 3</div>
 <div class="tab">tab 4</div>

 <div class="menu">menu 1</div>
 <div class="menu">menu 2</div>
 <div class="menu">menu 3</div>
 <div class="menu">menu 4</div>

以前的基于 jQuery 的系统使用 .index() 来确定单击了哪个选项卡，然后使用 .eq() 来控制显示哪个隐藏菜单。

我现在想知道如何用普通的 javascript 来做同样的事情。

在最坏的情况下，我可以将类重命名为 tab1、tab2、menu1、menu2 并为每个类编写单独的脚本，但我喜欢索引/eq 系统为添加或删除菜单面板提供的灵活性。

谢谢

Answer 1

两者的原型(prototype)都是通过模拟 index 和 eq jquery 函数创建的。检查下面的 fiddle 链接:

考虑下面的 HTML

<div class="menu">menu 1</div>
<div id='two' class="menu">menu 2</div>
<div class="menu">menu 3</div>
<div class="menu">menu 4</div>

http://jsfiddle.net/w4hL4u6z/1/

function index(element){
    var sib = element.parentNode.childNodes;
    var n = 0;
    for (var i=0; i<sib.length; i++) {
         if (sib[i]==element) return n;
         if (sib[i].nodeType==1) n++;
    }
    return -1; 
}

alert(index.call(this,document.getElementById('two')));

function eq(index) {
   if(index>=0 && index < this.length)
    return this[index];
   else 
    return -1;
}
var e= document.getElementsByClassName('menu');
alert(eq.call(e,1).textContent);

希望对您有所帮助，您可以从这里开始满足您的要求!