Mootools get the child-index of an element from its parent

Question

I am using event delegation in mootools. I want to know the row number that has been clicked. My solution is shown in this jsfiddle: Is there a better way than what I am currently doing?

My approach was to compare the elements until i found the match. Is there an IndexOf method I could use?

(The following is the data from the jsfiddle for the future)

HTML:

<div id="Record_List">
    <div class="Row">
        <input type="submit" name="Row" value="Edit"/>
    </div>
    <div class="Row">
        <input type="submit" name="Row" value="Edit"/>
    </div>
</div>

Javascript:

window.addEvent(
    'domready',
    function()
    {
        $('Record_List').addEvent(
            'click:relay(input)',
            function(evt, target)
            {
                evt.stop();

                var rowElem = target.getParent();
                var rowNumber = -1;

                $('Record_List').getChildren('div.Row').each(
                    function (el, num)
                    {
                        if (rowElem === el)
                        {
                            rowNumber = num;
                        }
                    });

                // Find the position of the row and display it here:
                alert('Row number: ' + rowNumber);
            });
    });

score 9 · Accepted Answer · answered Aug 18 '11 at 04:54

The type (Elements) returned by getChildren contains Array methods, including indexOf. MooTools will provide an implementation of that method if it does not exist for the browser. With that in mind, you could write:

$('Record_List').getChildren('div.Row').indexOf(rowElem);

Updated example: http://jsfiddle.net/andrewwhitaker/uJarB/

score 0 · Answer 2 · answered Aug 18 '11 at 04:46

0

This is pretty hacky, but you can always use Array.prototype's indexOf...

Array.prototype.indexOf.call(list-o-children, elem-to-find)

answered Aug 18 '11 at 04:46

zenazn

14,295
2
36
26

AHHP · Answer 3 · 2020-11-18T14:32:06.460

-1

MooTools Element.getAllPrevious returns all sibling elements before the current element, the length of previous siblings equals to the index of the current element.

var index = rowElem.getAllPrevious('div.Row').length;

edited Nov 18 '20 at 14:32

answered Nov 18 '20 at 11:46

AHHP

2,967
3
33
41

Hi, even though this code may be the answer to the question, it's important to add some context to the answer to improve its quality, so add it if you can. You can check more answering tips here [How to answer](https://stackoverflow.com/help/how-to-answer) – fmaccaroni Nov 18 '20 at 14:11
1

For MooTools users, the code and function usage is clear; btw I added some notes. – AHHP Nov 18 '20 at 14:33

Mootools get the child-index of an element from its parent

3 Answers3