Change Parent Element Style With Jquery
I have next html setup: 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 -
<scriptsrc="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');
})
Post a Comment for "Change Parent Element Style With Jquery"