Question

I have the following html:

<div id="myDiv1_" class="formElement1"><asp:TextBox ID="TextBox1" CssClass="formInput1" runat="server"></asp:TextBox></div><br />
<div id="myDiv2_" class="formElement1"><asp:TextBox ID="TextBox2" CssClass="formInput1" runat="server"></asp:TextBox></div><br />
<div id="myDiv3_" class="formElement1"><asp:TextBox ID="TextBox3" CssClass="formInput1" runat="server"></asp:TextBox></div>

And I have the following jQuery code:

$('input[type="text"]').focus(function () {
    $(this).addClass("formElement1");
});

$('input[type="text"]').blur(function () {
    $(this).removeClass("formElement1");
});

What I am trying to do is when the input box has focus I want to change class for the div. I am trying to change the $(this).addClass to use something like $('#' + div_id + textbox_id').addClass.

However, being somewhat new to jQuery, I am not sure how to accomplsh this. Any help is appreciated.

Thank you

Answer 1

To change the class of the parent div, use:

$('input[type="text"]').focus(function () {
    $(this).closest('div').addClass("formElement1");
});

$('input[type="text"]').blur(function () {
    $(this).closest('div').removeClass("formElement1");
});

closest method will search up the dom (starting at this) for the first element that match