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);
});
});
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/
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With