How to add a CSS class to an element using a jQuery Selector?


Tags: jquery,html,css

Problem :

I am pretty new to JavaScript and jQuery and getting a little confused with "Selectors". Now I am sure you are all gurus and will find this trivial, so hoping you can help.

I have this HTML:

  <div class="class0">
    <div class="class1">
      <div class="class2">
        <div class="class3">Field 1:</div>
           <label class="class4">
               <input name="field" type="text" class="class5" />
           </label>

I am trying to addClasses to a number of elements but am getting stuck. I am trying to:

jQuery('.class0 input')
    .focus(function() {
    jQuery(this).parents('.class1').addClass("special_class");
    jQuery(this).parents('.class3').addClass("special_class_1");
    jQuery(this).parents('.class5').addClass("special_class_2");

But it doesn't seem to work - Class 1 does but the rest don't?



Solution :

If you are targeting one parent only then use .closest rather than parents.

Also if you know the node type of an element with a class it is always better to prefix the selector. In this case they all look like divs.

Try:

jQuery('div.class0 input').focus(function() {

    var $el= $(this);
    $el.closest('div.class1').addClass("special_class");
    $el.closest('div.class3').addClass("special_class_1");
    $el.closest('div.class5').addClass("special_class_2");

});

    CSS Howto..

    How to prevent inner text resizing in CSS Animation @keyframes?

    How to remove space between bootstrap columns?

    How to align social media icons in one row?

    CSS: How to lay an image on top of a table

    how to write this code in right way in javascript

    Interface problem the right css style is not being called. How to call the right one?

    How to slide a div with p tag to right with css animation usin max-width?

    How to make gridview and cells bigger?

    How to make responsive popup div?

    How to remove and override CSS attribute from parent class?

    how to make dropdown menu using html & css

    How to create dynamic responsive four columns with border style?

    How to change the css style with a html inline link

    CSS: Div boxes overlap each other and hide text. How to “clear” them?

    How can I create a responsive web page layout with 'display:inline-block'?

    how to apply ellipse effect in which contain space in string?

    How to create rounded corners on DIV's with CSS and ASP.NET MVC 3

    css: How to add blank space under a sprint element

    How do we group monospace font families with regards to their serif property? [closed]

    How to vertically align a form and image

    HTML / CSS - How to remove a gap between the header and a horizontal menu

    How to hide autofill safari icon in input field

    How do I control the height of the main content area no matter how much text is in there?

    How can I make the input stay as it is in the hover mode, when it contains any text?

    How to make textareas auto-resize using just CSS?

    how can I hide empty cells in a table with bootstrap 3

    How to Set Banner-Like Background Image With CSS

    HTML/CSS Fluid Grid: How to overlay div to another div

    I want to bring css for select option. how to write for this image, sample output like this

    How to access this element with CSS