title: Jquery changing background of parent div
body: <p>I have the following snippet in one of my html pages :</p>
  
  <pre><code>&lt;div class="inputboximage"&gt;
      &lt;div class="value2"&gt;
      &lt;input name='address1'  value='Somewhere' type="text" size="26" maxlength="40" /&gt;
      &lt;br /&gt;
  
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>My problem is that I need the <code>inputboximage background</code> to change when I click in the <code>address1</code> text field and to revert to the original when it loses focus.</p>
  
  <p>I have used the following :</p>
  
  <pre><code>  &lt;script&gt;
    $(document).ready(function(){
  
      $("input").focus(function () {
           $(this.parentNode).css('background-image', 'url(images/curvedinputblue.gif)');
      });
  
      $("input").blur(function () {
      $(this.parentNode).css('background-image', 'url(images/curvedinput.gif)');
      });
  
    });
    &lt;/script&gt;
  </code></pre>
  
  <p>but instead of replacing the image, it seems to be adding a background image to the value2 div as you would expect. I can use <code>parentNode.parentNode</code> in this case, but there is also a chance that the <code>inputboxImage</code> node could be further up or down the parent tree.</p>
  
  <p>Is there a way I can change this code so that it will navigate down the parent tree until it finds a div called <code>inputboximage</code> and replace the image there?</p>
  
  <p>Also, if I have two different div classes, <code>inputboximage</code> and <code>inputboximageLarge</code>, is there a way to modify this function so that it will work with both, replacing the background image with a different image for each one?</p>