Vanilla js replacements for jQuery's index() and eq()

Question

I am converting our webpage's older jQuery based DOM manipulations to vanilla javascript, Most has gone surprisingly easy, but have hit a wall with the flyout menus.

We use a simple format of tabs and hidden menu divs:

 <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>

The former jQuery based system used .index() to determine which tab was clicked and then the .eq() to control which hidden menu was revealed.

I am now wondering how I might go about doing the same with vanilla javascript.

In worse case scenario I could rename the classes as tab1, tab2, menu1, menu2 and write individual scripts for each, but I liked the flexibility the index/eq system provided for adding or removing menu panels.

Thanks

There's .index in vanilla js... – Bhojendra Rauniyar Jan 09 '15 at 06:13 — Bhojendra Rauniyar, Jan 09 '15 at 06:13

Rakesh_Kumar · Accepted Answer · 2015-01-09T08:17:09.577

3

Prototypes for both are created simulating index and eq jquery functions. Check below fiddle link:

Consider below 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);

Hope that helps and you can take it from here upto your requirements!

edited Jan 09 '15 at 08:17

answered Jan 09 '15 at 06:56

Rakesh_Kumar

1,442
1
14
30

This works just great. Thanks. BUT on the eq function, line 2, it needs to be index>=0 otherwise the "0" index items fail to work. (well at least that seemed to fix it in my trial and error attempts ;-) – Tom Jan 09 '15 at 08:04
@Tom Yeah..Silly mistake!...Changes done..If you find useful, do accept as answer. Thanks! – Rakesh_Kumar Jan 09 '15 at 08:19

score 1 · Answer 2 · answered Jan 09 '15 at 06:49

Alright I cooked up a fiddle: http://jsfiddle.net/cw0gpa7k/15/

Basically you have to grab the dom elements by index and attach functions based on that. You will have to use properties to make items go through to the anonymous function you attach. See below code:

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;
        }

    }
}

Note that to feed the anonymous function fed to the onclick I use a property menus[i].index = i; This is how you feed things through in JavaScript. You add properties to the dom objects. That's what I do anyway. The isShow thing is just a flag property initialized to false at first.

Vanilla js replacements for jQuery's index() and eq()

2 Answers2