Question

I am very new to jquery and need some help. I am trying to change a css element when I enter a textbox. I have applied a css class to my textboxes and I have a couple of div tags around my textboxes.

When a user selects the textbox I want to change the desired div tag.

This is how the html looks

<div class="left">
    <div class="right">
        <input name="myTextBoxID" type="text" id="myTextBoxID" class="myTextBox" />
        <span id="rfInput"></span>
    </div>
</div>

my jquery looks like this

<script language="javascript" type="text/javascript">
   $(function () {
       $('.myTextBox').focus(function () {

           $('.box.left').addClass("active");
       }).blur(function () {
           $('.box.left').removeClass("active");
       });
   });
</script>

Now the jquery is working and changes the class on focus and blur however it effects all elements witht he class=”myTextBox” how can I get jquery to attach to all elements however only fire the css change to the selected textboxes outside elements class?

Any help would be great!

Answer 1

<script language="javascript" type="text/javascript">
   $(function () {
       $('.myTextBox').focus(function () {
           $(this).closest('.left').addClass("active");
       })
       .blur(function () {
           $(this).closest('.left').removeClass("active");
       });
   });


</script>

this refers to the element that received the event.

So you wrap this into a jQuery object, $(this) and access the closest() ancestor with the class you designate.

.closest() – http://api.jquery.com/closest/