Vanilla js 替换 jQuery 的 index() 和 eq() [重复]答案

【问题标题】：Vanilla js replacements for jQuery's index() and eq() [duplicate]Vanilla js 替换 jQuery 的 index() 和 eq() [重复]
【发布时间】：2015-01-09 06:12:34
【问题描述】：

我正在将我们网页上旧的基于 jQuery 的 DOM 操作转换为 vanilla javascript，Most 变得异常简单，但弹出式菜单遇到了麻烦。

我们使用简单的标签格式和隐藏菜单 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() 来控制显示哪个隐藏菜单。

我现在想知道如何使用 vanilla javascript 做同样的事情。

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

谢谢

【问题讨论】：

原版js中有.index...

标签： javascript jquery html css

【解决方案1】：

两者的原型都是模拟 index 和 eq jquery 函数创建的。检查下面的小提琴链接：

考虑下面的 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);

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

【讨论】：

这很好用。谢谢。但是在 eq 函数第 2 行，它需要 index>=0 否则“0”索引项无法工作。（至少这似乎在我的反复试验中解决了它;-)
@Tom 是的..愚蠢的错误！...更改完成..如果您觉得有用，请接受作为答案。谢谢！

【解决方案2】：

好吧，我做了一个小提琴：http://jsfiddle.net/cw0gpa7k/15/

基本上，您必须通过索引来获取 dom 元素，并在此基础上附加函数。您将不得不使用属性使项目通过您附加的匿名函数。见以下代码：

var menus = document.getElementsByClassName('menu');
var tabs = document.getElementsByClassName('tab');
for (var i = 0; i < menus.length; i++)  {
    menus[i].index = i;
    tabs[i].isShown = false;
    menus[i].onclick = function() {
        if (!tabs[this.index].isShown) {
            tabs[this.index].style.display = 'block';
            tabs[this.index].isShown = true;
        }
        else {
            tabs[this.index].style.display = 'none';
            tabs[this.index].isShown = false;
        }

    }
}

请注意，要将匿名函数提供给 onclick，我使用属性 menus[i].index = i; 这就是您在 JavaScript 中提供内容的方式。您将属性添加到 dom 对象。反正我就是这么做的。 isShow 只是一个标志属性，一开始初始化为 false。

【讨论】：