CODEWITHSUNDEEP
jqueryhtml
Jimoc
Jimoc

Reputation: 1500

Jquery changing background of parent div

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?

Upvotes: 12

Views: 85093

Answers (4)

user7094
user7094

Reputation:

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)

Upvotes: 22

adardesign
adardesign

Reputation: 35691

.parent().css(changes here)

Upvotes: 0

Tamas Czinege
Tamas Czinege

Reputation: 121294

Now since in HTML only IDs are unique, you can reference the div directly without doing any traversal:

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

    </div>
</div>

<script>
  $(document).ready(function(){

    $("input").focus(function () {
         $('#inputboximage').css('background-image', 'url(images/curvedinputblue.gif)');
    });


  });
</script>

Note that while it is possible to filter the parent elements for CSS classing, using style classes dor behaviour is a Bad Idea TM and you should avoid doing that. But if you are really desperate, you can give it a try:

$("input").focus(function () {
         $(this).parents('div.inputboximage').css('background-image', 'url(images/curvedinputblue.gif)');
    });

Upvotes: 0

Prody
Prody

Reputation: 5298

I'm not 100% sure but I think what you need is what Phill Sacre's answer suggests except using parents (notice the last s)

From jQuery API:

parent( String expr ) returns jQuery Get a set of elements containing the unique parents of the matched set of elements.

parents( String expr ) returns jQuery Get a set of elements containing the unique ancestors of the matched set of elements (except for the root element).

Upvotes: 2

Related Questions