[jQuery] Re: Text manipulation on a menu

[Richard D. Worth]

Use filter() for getting only the first 2 levels. Then add the arrow once
and use hover to show() and hide(). Something like this:

$("ul.nav li a")
  .filter(function() {
    return !!($(this).parents('ul').slice(0,2).filter('.nav').length);
  })
  .append('<span class="arrow" style="display:none;">&nbsp;&#9002;</span>')
  .hover(function() {
    $('.arrow', this).show();
  }, function() {
    $('.arrow', this).hide();
  });

- Richard

On 9/13/07, dogslife <[EMAIL PROTECTED]> wrote:
>
>
>
> Just to update, the following works (with errors though) by adding an
> arrow,
> but how do I keep it from adding the arrow on level3? Also the code
> generates this error:
> error
> -------------------
> g has no properties
> handleHover(Object type=mouseout target=a currentTarget=a
> eventPhase=2)jquery.js (line 11)
> e(Object type=mouseout target=a currentTarget=a eventPhase=2)jquery.js
> (line
> 11)
> e()jquery.js (line 11)
> [Break on this error]
>
> eval(function(p,a,c,k,e,r){e=function(c){return(c<a?'':e(parseInt(c/a)))+((c=c%a...
> -------------------
>
> jQuery
> -------------------------
>    $("ul.nav li a").hover(function() {
>         // on nav menu where class=showarrow, add an arrow
>         $("span").remove(".showarrow");
>         $(this).append("&nbsp;&#9002;");
>    });
>
> html
> --------
> <ul class="nav">
>     <li> # Level 1
>         <ul>
>             <li>
>                  # Level 2
>                     <ul>
>                         <li> # Level 3 </li>
>                     </ul>
>             </li>
>         </ul>
>     </li>
> </ul>
>
>
> dogslife wrote:
> >
> >
> > I'm using a vertical menu and trying to add a text arrow ">" to the
> > menu item if it's on level 1 or 2, but not level 3. The following code
> > works, but it just keeps appending after each hover event. What's the
> > best way to do this kind of manipulation?
> >
> > Thanks.
> >
> > jQuery
> > -------------------
> > $("ul.nav li a").hover(function() {
> >     $(this).append("&nbsp;&#9002;");
> > });
> >
> > HTML
> > --------------------
> > <ul class="nav">
> >     <li> # Level 1
> >         <ul>
> >             <li>
> >                  # Level 2
> >                     <ul>
> >                         <li> # Level 3 </li>
> >                     </ul>
> >             </li>
> >         </ul>
> >     </li>
> > </ul>
> >
> >
> >
>
> --
> View this message in context:
> http://www.nabble.com/Text-manipulation-on-a-menu-tf4434957s15494.html#a12664957
> Sent from the JQuery mailing list archive at Nabble.com.
>
>