#1175 new
Michael Morris

Element#index (or better name if someone has an idea).

Reported by Michael Morris | December 1st, 2010 @ 05:32 PM

Proposal for a new method, tentatively titled index, that returns the element's index position within parent. So if the element is it's parent's first child it returns 1, if it's the third it returns 3, and so on. Very simple really. I know how to use Element method extending to add the method for my personal projects but this is so dirt simple I'm wondering if it might be useful to others at a framework level.

An example of how it might be used...

I'm working on a tab group js and trying to get the amount of HTML markup down to the bare minimum. I hit upon the following approach - here's the html.

<div class="TabGroup">
  <ul>
    <li>First Tab</li>
    <li>Second Tab</li>
  </ul>
  <div>First Tab Body</div>
  <div>Second Tab Body</div>
</div>

On window load we hide all the tabs, see if any are marked active by having an active class, then reveal the body for that tab. Here's where the index method would be useful - the tabs are in the UL in the same order as the

's. The code becomes fairly simple with this index method proposal
$$('.TabGroup').each(function(s){
  s.down('ul').childElements().invoke('observe', 'click', function(ev){
    ev.findElement('ul').childElements().invoke('removeClassName', 'Active');
    ev.findElement('li').addClassName('Active');
    ev.findElement('div.TabGroup').select(':not(:first-child)').invoke('hide');

    // The new index method is in this line.
    ev.findElement('div.TabGroup').down( ev.findElement('li').index() + 1 ).show();
  });
});

Thoughts?

Comments and changes to this ticket

Please Sign in or create a free account to add a new ticket.

With your very own profile, you can contribute to projects, track your activity, watch tickets, receive and update tickets through your email and much more.

New-ticket Create new ticket

Create your profile

Help contribute to this project by taking a few moments to create your personal profile. Create your profile ยป

The Prototype JavaScript library.

Shared Ticket Bins

People watching this ticket

Pages