Html – Jquery changing background of parent div

htmljquery

I have the following snippet in one of my html pages :

<div class="inputboximage">
    <div class="value2">
    <input name='address1'  value='Somewhere' type="text" size="26" maxlength="40" />
    <br />

    </div>
</div>

My problem is that I need the inputboximage background to change when I click in the address1 text field and to revert to the original when it loses focus.

I have used the following :

  <script>
  $(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)');
    });

  });
  </script>

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 parentNode.parentNode in this case, but there is also a chance that the inputboxImage node could be further up or down the parent tree.

Is there a way I can change this code so that it will navigate down the parent tree until it finds a div called inputboximage and replace the image there?

Also, if I have two different div classes, inputboximage and inputboximageLarge, 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?

Best Solution

I think using

$(this).parents('div.inputBoxImage').css(...)

instead of $(this.parentNode) should work.

See the jQuery traversing documentation

Edit: updated following Prody's answer (changed parent to parents)