Modify the color of the background div beforehand

How can I change the background color of the div "#cont-comentarios" when a checkbox is clicked? The change should occur in a loop using 'this'. I have tried numerous solutions before reaching out for help. See the code snippet below for better understanding:

<div id="cont-comentario" style="margin-bottom: 10px; background:#eee; padding: 10px;">
    <p>
        <label>
            <input type="checkbox" id="atualizaComentario"/> Ativo
        </label>
    </p>
</div>

http://jsfiddle.net/9pMKy/

Answer №1

If you want to target the ancestor div using .closest() method, you can achieve it like this:

$(function(){
    $('button#updateComment').click(function(){
        $(this).closest('div').css('background-color','blue');
    });
});

Check out the live demo here

Answer №2

Almost there!

$(function(){
    $('#updateComment').click(function(){
        $(this).parents('div#comment-container').css({backgroundColor:'blue'});
    });
});

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

"Using jQuery to dynamically change the src attribute of an iframe, the change persists even after

There's a strange issue bothering me. On a single page, I have a menu and an iframe. Whenever I click on a menu button, the jQuery code changes the src attribute of the iframe. Initially, when the page loads, the iframe is supposed to display "Home". ...

Formatting the numbers for an unordered list located outside of the content

Can the numbers of an ordered list be formatted using the list-position-style set to outside? I am looking for a solution using only CSS since I cannot edit the HTML. Essentially, I want styled numbers with round background to replace the outside numbers. ...

Tips for displaying HTML5 validation messages when the input is changed

I am working on a form where I prefer not to submit it directly, as I am making an AJAX call instead. However, I still want the HTML5 validation messages to show up when an input field is left empty. I have managed to display the validation message when a ...

Bootstrap Dropdown Functionality Malfunctioning

Here is a simple piece of HTML code that I have created: <!doctype html> <html> <head> <meta charset="utf-8"> <title>.:Home Page:. The Indian Sentinel</title> <link rel="stylesheet" href=" ...

Trouble with centering navigation bar using HTML margin:auto

Below is the code snippet I'm currently working on: .nav-item { display: inline; color: white; padding: 30px 10px; font-style: bold; font-family: sans-serif; font-size: 20px; width: 1000px; margin: 0 auto; } .nav-container { back ...

Top solution for resolving TypeScript error - property not found on type

Encountering an issue when defining a custom property on an array or object in typescript, leading to the error message: "Property x does not exist on type Object (or type Array)" For instance, working with typescript in Angular and having a defined scop ...

Using Knockout to bind an element to the selected value from a dropdown list

When using the following select, I am connecting it to an observable array. <select id="selectProtocols" data-bind="options: optionsAvailable, optionsCaption:'Selecione...', optionsText: 'SimpleDescription', optionsValue:'???&a ...

Interacting with jQuery mouse events on elements below the dragged image

I'm attempting to create a drag-and-drop feature for images using jQuery. While dragging, I generate a thumbnail image that follows the mouse cursor. However, this is causing issues with detecting mouseenter and mouseleave events on the drop target pa ...

Tips for removing elements inserted with before() function

I have successfully implemented an alert-style div that is displayed when a user selects an option from a form and clicks the add to cart link. The jQuery .before() method is used to add the user's form selection to the div. I am facing two issues th ...

Utilizing AJAX for seamless communication between JavaScript and PHP within a modal dialogue box

I'm struggling with learning how to effectively use ajax. In the project I'm currently working on, I have a chart where I can select different people. Once I click on a person's button, their information gets updated in the database. However ...

The input field should be set to 'textarea' to allow multiple lines of text, and a line break should be

Here is a text area that functions like a post. It is designed to break at the end of the post instead of overflowing on the same line. .post input { outline: none; font-size: 15px; font-family: sans-serif; font-weight: 300; width: 200px; pa ...

Changing the font-family to 'Symbol' and using Windows-1252 character encoding

I have a collection of HTML documents that contain basic text encoded in Windows-1252, but scattered throughout the content are various instances of span elements styled with font-family: Symbol. For instance: <span style='font-family:Symbol& ...

"Facing a dilemma with Javascript's Facebox getElementById function - not fetching any

Utilizing facebox, I am initiating a small modal dialog with a form and attempting to retrieve the value from a text field on that form using javascript. Below is the HTML code: <div id="dialog-form95" style="display:none"> <div class="block"> ...

jQuery replacement for replaceChild method

I've been attempting to swap out an existing DOM element with a new one that I created. I attempted the following code snippet: $(this).parent().replaceChild(newElem,this); However, it resulted in an error message saying $(this).parent().replaceChi ...

What is the best way to retrieve the content of a specific class in Selenium WebDriver?

Python Code : from selenium import webdriver from selenium.webdriver.chrome.options import Options options = webdriver.ChromeOptions() options.add_argument(r"--user-data-dir=C:\Users\bji\AppData\Local\Google\Chrome\ ...

What is the best method for integrating jQuery FullCalendar using AJAX?

I need assistance loading a full calendar using Ajax. The data will be passed from the controller in JSON format, but I am unsure of how to implement it. Can someone please help me with this? Here is my controller code: public function calenderHoliday(){ ...

Determine the quantity of buttons located within a div container

Is there a way to determine the number of buttons within a specific div using JavaScript? <div id='maindiv'> <button></button> <button></button> <button></button> <button></butto ...

The Ajax request is failing to execute properly on newly appended elements

My comment system allows users to post comments which are then appended to the existing ones. Whenever a user hovers over a comment, a 'delete' button appears. Clicking on the delete button prompts a confirm dialog and upon confirmation, an ajax ...

Styling the alignment of category menu columns using CSS

I'm looking for advice on customizing a menu in Magento. The current menu is functional, but I'm not happy with how the items are aligned on the website. Below, you'll find an image of the current menu and another one displaying my preferred ...

What is the best way to adjust the size of this text using CSS?

I'm encountering an issue with font size in CSS. In the code below, you can see that I have a .post class containing < pre > tags nested inside it. Shouldn't the CSS styling for the pre tags work as intended? Despite setting the font size t ...