Mootools 从父元素获取元素的子索引

Question

我在 mootools 中使用事件委托。我想知道被点击的行号。我的解决方案如下所示 jsfiddle：有比我目前正在做的更好的方法吗？

我的方法是比较元素，直到找到匹配项。我可以使用 IndexOf 方法吗？

（以下是未来jsfiddle的数据）

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

Answer 1

getChildren 返回的类型 (Elements) 包含 Array 方法，包括 indexOf。如果浏览器不存在该方法，MooTools 将提供该方法的实现。考虑到这一点，您可以编写：

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

更新的示例： http://jsfiddle.net /andrewwhitaker/uJarB/

Answer 2

这非常hacky，但您始终可以使用Array.prototype的indexOf...

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

Answer 3

MooTools Element.getAllPrevious 返回当前元素之前的所有兄弟元素，前一个兄弟元素的长度等于当前元素的索引。

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