Bind a jquery function to elements

Question

Hi there,

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

you were not that clear, so, here,s my guess...

    $(function () {
       $('.myTextBox').focus(function () {

           $(this).closest('.left').addClass("active");

       }).blur(function () {

           $(this).closest('.left').removeClass("active");

       });
   });

Answer 2

<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/

Answer 3

Hey Regiel, Sorry I couldnt find the old post so created a new one and tried to be a little clearer.....obviously not :(

<div class="left" id="1">
    <div class="right">
        <input name="myTextBoxID" type="text" id="myTextBoxID1" class="myTextBox" /><span
            id="rfInput"></span>
    </div>
</div>
 <div class="left" id="2">
    <div class="right">
        <input name="myTextBoxID2" type="text" id="Text2" class="myTextBox" /><span
            id="Span1"></span>
    </div>
</div>
 <div class="left" id="3">
    <div class="right">
        <input name="myTextBoxID3" type="text" id="Text3" class="myTextBox" /><span
            id="Span2"></span>
    </div>
</div>

Ok so lets say I 3 div tags with the class="left" inside I have my textbox. When I get focus inside lets say for example myTextBoxID1 I want the css of its parent div id="1" to change from left to be left active. I dont want any other elements to change.

Hope that makes a little more sense