[jQuery] next 'span' element that is not a sibling

[Benjamin Ortuzar]

Hi guys,

I'm trying to navigate trough keywords, using jquery. So i would click
on the 'next' link beside the highlighted keyword and it will take me
with focus() to the next highlighted keyword within the div element.
This is the code im using but its not working, since next() only
searches for the next sibling, but the next 'span' tag could be not a
sibling, but within another parent.

Sorry for using the font tag, but i inherit this html, from another
system.

<script type="text/javascript">
        $(document).ready(function() {
                $('div#document font').each(function() {
                        $(this).before("<span onclick='previous(this);'
style='color:red;'>Previous</span> ");
                        $(this).after(" <span onclick='next(this);'
style='color:red;'>Next</span>");
                });
        });//end ready

        function previous(obj){
                $(obj).prev('font').css("background", "blue").focus();
        }

        function next(obj){
                //'obj' is the span element that has the onlick element
                $(obj).next('font').css("background", "green").focus();
        }
</script>

<div id='document'>
  <p> some text <font>highligthed word</font></p>
  <p>some more text <font>and another</font>  text <font>another</
font></p>
</div>



Thanks,
ben