how can i get which nth-child event click with mootools

1.6k Views Asked by At

For example, I have fallowing code:

<ul id="agregator-menu">
    <li class="agregator-menu-item"><a href="">News</a></li>
    <li class="agregator-menu-item"><a href="">Reviews</a></li>
    <li class="agregator-menu-item"><a href="">Videos</a></li>
</ul>

Is here any way how i can get nth-child (1 or 2 or 3) with Mootools in click event?

EDIT: I apologize for the wrong question. May be this code help.

<script type="text/javascript">
    var items = $$('.agregator-menu-item a');
    (items).addEvent('click', function(event) {
        /*here how i can get number of position agregator-menu-item (this) in 
          #agregator-menu  which user clicked 
        */      
    });
</script>
2

There are 2 best solutions below

0
On

I want display contentitems with same index as menuitems onClick

result:

var menuitems = $$('.agregator-menu-item a');
var contentitems = $$('.agregator-item');

(menuitems).each( function(el, index) {
    el.addEvent('click', function(event) {
        event.stop();
        event.stopPropagation();
        contentitems.setStyle('display', 'none');
        contentitems[index].setStyle('display', 'block');   
    });
});
0
On

Please see the following code (also on http://jsfiddle.net/6p5y8vbn/)

HTML:

<div id="buttons">
    <button>Button 1</button>
    <button>Button 2</button>
    <button>Button 3</button>
    <button>Button 4</button>
</div>

JS:

var btns = $('buttons').getElements('button');

Array.each(btns, function(btn) {
    btn.addEvent('click', function() {
        console.log(btns.indexOf(this));
    });
});

btns.indexOf(this) will show you what the index of the clicked item in the array of buttons is. Note that Array indexes start at 0, so the first button clicked will return 0, second button 1 etc