Change Parent Element Style With JQuery

I have next html setup:

Click

And I want to cha

Solution 1:

you need to use .click() or .on('click') .. and you can use .closest() as well instead of using parent() twice

$(function(){
    $('.three').on('click',function(){
        $(this).closest('.one').css('backgroundColor', 'red');
    })
});

Solution 2:

Just add Click event at your code. First add jquery.min.js then add the script. You can do like this -

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script>
     $(".three").click(function(){
         $(this).parent().parent().css("background","red");
     });
</script>

Solution 3:

Since it's a descedant of the element, you can use .parents() which travels up until the selector is found.

Additionally, You can use the CSS syntax inside of the CSS method (background-color instead of backgroundColor).

$('.three').on('click', function(){
    $(this).parents('.one').css('background-color', 'red');
})

Solution 4:

I can't comment, so, little addition to higher answer:

$(function(){
    $('.three').on('click',function(){
        $(this).closest('.one').css('background-color', 'red');
    })
});

Css doesn't have property with name backgroundColor

Solution 5:

You can use something like this.

$('.three').on('click',function(){
    $(this).closest('.one').css('backgroundColor', 'red');
})