Style To Specific Div Class Elements Containing A Specific Input Elements

I have a below set of input text elements in my page. I actually need to apply style to div element of 'forms_in_ap' class containing the #email, #reEmail, #nogInFirstName, #nogInA

Solution 1:

If you have access to the HTML you can simply add a new class to the divs that contain the input fields and that need to be modified. For example "modify-this", then style that class accordingly.

If your HTML is dynamic and might change, or if you can't modify the HTML directly for some reason, the second easiest way to achieve this is using some jQuery to add a class to the elements you want to modify, you can achieve this by using the .parent() function, like so:

$(document).ready(function () {
  $('#email').parent('.forms_in_ap').addClass('modify-this');
  $('#reEmail').parent('.forms_in_ap').addClass('modify-this');
  $('#nogInFirstName').parent('.forms_in_ap').addClass('modify-this');
  $('#nogInAccNumber').parent('.forms_in_ap').addClass('modify-this');
});

This will add the "modify-this" class to the divs that contain the 4 inputs with the IDs specified above. You can then style that class as normal.

Note that this works because each input is inside the div that you need to modify, meaning that the div is the parent of the input element. By entering the class "forms_in_ap" into the parent() function, we tell jquery to find the parent of the input that contains that class.