[jQuery] Finding previous & next "siblings" encapsulated in other ?

[Julien]

Hi,

I have a form that uses several text fields to set the footer of the
current page.
The fields are "Company name", "Street", "Town" and things like that.

When a keystroke occurs in one of those fields, I update the footer
with the corresponding info, using the "onkeyup" event.
All this works fine.

My form also has some checkbox to tell if the infos in the footer must
be separated with bullet characters. In such case a bullet must be
appended to the string retrieved from the current field, but only if
the next footer info is not empty or does not start itself with a
bullet.
Similarly, if the previous footer info is empty and does not end with
a bullet, a bullet must be added at the beginning of the current
string.

So, I have to make the UpdateFooter() function here below more subtle.
>From the "this" argument passed to that function, I've been unable to
find with jQuery the previous and next <li>-encapsulated "siblings".

This is a rather complex problem for a jQuery newbie and I'm not sure
that I really catched how to use "previous()" and "next()"
efficiently.

Thanks for any help.
Julien

(...)
<fieldset name="footer_infos" class="invisible">
  <ul>
    <li>
        <input name="footer_company" type="text" size="14" maxlength="36"
onkeyup="UpdateFooter(this);"
                class="text_input" />
        <input name="footer_company_checkbox" type="checkbox"
checked="checked" />Company name&nbsp;:
    </li>
    <li>
        <input name="footer_street" type="text" size="24" maxlength="36"
onkeyup="UpdateFooter(this);"
                class="text_input"  />
        <input name="footer_street_checkbox" type="checkbox"
checked="checked" />Street&nbsp;:
    </li>
    <li>
        <input name="footer_town" type="text" size="19" maxlength="36"
onkeyup="UpdateFooter(this);"
                class="text_input" />
        <input name="footer_town_checkbox" type="checkbox"
checked="checked" />Town&nbsp;:
    </li>
    (...)
  </ul>
</fieldset>
(...)

(...)
<td colspan="2" id="pied_page" class="fond_pied_page" align="center">
<span id="company"></span>
<span id="street"></span>
<span id="town"></span>
(...)
</td>
(...)


<script type="text/javascript" language="Javascript">

 function UpdateFooter (caller) {

  var blnAddBullet = false;

  var value = caller.value;

  // test
  // $('[name=footer_infos] ul li').next().css('background','yellow');

  var name = caller.name.substr(7);
  if (document.getElementById('footer_bullets').checked)
    if (name != 'www') {  // if not the last field

                value += '&nbsp;&bull;&nbsp;';  // add bullet at the end of the
string
    }
  else
    value += '&nbsp;';
  document.getElementById(name).innerHTML = value;
 }

</script>