Hi Jinsa,
Your `bindage` method nearly works, you just have to change `$
('menu').down('li').each` to `$('menu').select('li').each`.
Element#down (with no index argument) finds the first matching
descendant element and returns it; Element#select finds all matching
descendant elements and returns them as an array. My use of
Element#select here assumes that you *know* there won't be any nested
lists, as it will match all descendant LIs, even those in nested lists
within the list you're searching.
But `bindage` can be improved. You're creating a new function for each
LI, which is inefficient and unnecessary. You could do this:
function bindage()
{
$('menu').select('li').invoke('observe', 'click', function(event)
{
event.stop();
alert('hellow bro');
});
}
or this, which has the advantage of using a named function (which
makes it possible for your tools to help you -- showing function names
in stack traces, etc.):
function bindage()
{
$('menu').select('li').invoke('observe', 'click',
bindage_liClick);
function bindage_liClick(event)
{
event.stop();
alert('hellow bro');
}
}
Both of those use a single function to watch all of LIs.
But wait, there's more: Why watch the individual LIs at all? The click
event bubbles up the DOM, so you could just watch the UL -- unnamed
example:
function bindage()
{
$('menu').observe('click', function(event) {
var li;
li = event.findElement('li');
if (li)
{
event.stop();
alert('hellow bro');
}
});
}
or (named):
function bindage()
{
$('menu').observe('click', bindage_ulClick);
function bindage_ulClick(event)
{
var li;
li = event.findElement('li');
if (li)
{
event.stop();
alert('hellow bro');
}
}
}
HTH,
--
T.J. Crowder
Independent Software Consultant
tj / crowder software / com
www.crowdersoftware.com
On Feb 20, 1:58 pm, Jinsa <[email protected]> wrote:
> Hi everybody!
>
> I'm actually working on a script acting on a UL menu with different LI
> classname. The goal is to react onMouseOver and onClick on each LI
> click or mouseover differently. The fact is the class is unknown so my
> script have to check the UL and then observe each LI as elements.
>
> Here is the html:
>
> <ul id="menu">
> <li class="item"><a id="current" href="">First</a>
> <li class="item23"><a id="current" href="">Second</a>
> <li class="item22"><a id="current" href="">Third</a>
> <li class="item12"><a id="current" href="">Vador</a>
> <li class="item6"><a id="current" href="">What the!</a>
> <li class="item2"><a id="current" href="">Hahum!</a>
> </ul>
>
> and then the script:
>
> function bindage()
> {
> $('menu').down('li').each(function (el)
> {
> return $(el).observe('click', function(event)
> {
> event.stop();
> alert('hellow bro');
> });
> });
>
> }
>
> Event.observe(window, 'load', bindage);
>
> But that obviously doesn't work... I really don't have any idea to
> make it work... I've tried so far but without any success... maybe you
> could help me?
>
> Thanks,
>
> JF.
--
You received this message because you are subscribed to the Google Groups
"Prototype & script.aculo.us" group.
To post to this group, send email to [email protected].
To unsubscribe from this group, send email to
[email protected].
For more options, visit this group at
http://groups.google.com/group/prototype-scriptaculous?hl=en.
