Using JQuery to Retrieve the Grandparent Element based on Class

In my HTML, I have a <textarea> enclosed within a <div>, which in turn is inside another <div>. The <textarea> has an ID that can be referenced, but the parent <div>s do not have IDs. However, they always have a specific class assigned to them. There could be multiple instances of this structure on the same page, with only the <textarea> having a unique ID:

<div class = "grandparent">
  <div class = "parent">
    <textarea id = "id_1"></textarea>
  </div>
</div>

<div class = "grandparent">
  <div class = "parent">
    <textarea id = "id_2"></textarea>
  </div>
</div>

I am unable to modify this existing structure. Is it feasible for me to apply styles to the grandparent <div> using JQuery?

Edit: Just to clarify, I am interested in styling the grandparent element that contains a particular <textarea>.

jqueryhtmlcss

Answer №1

One way to achieve this is by using the closest() method, which will target the first element that matches the specified selector, starting from the current DOM tree position.

$( "#id_1" ).closest('.grandparent').css( "background-color", "red" );

Check out the live demonstration here

Answer №2

source: https://www.jquerytutorials.net/dommanipulation.html

Thus, the code should appear as follows:

$( "#element_id_2" ).parent().parent().css( "background-color", "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

Organize your information starting from the left and moving to the right

Currently, I am engaged in a project where I need to retrieve commands and showcase them on a screen. However, there seems to be an issue as the commands are appearing one by one and automatically moving down to the footer. What I actually want is for th ...

phphtmlcss

Exporting canvas as JSON and importing JSON back into canvas

Is there a way to prompt file explorer to open and allow me to select a save location for the JSON file of my canvas when I click the save button? Additionally, how can I load the canvas with the JSON file using the load button? Any guidance on getting s ...

javascriptjsonhtmlcanvas

How can the user-visible text be reset in jQuery UI Autocomplete function?

I am currently working with a jQuery UI Autocomplete box and it is functioning properly. However, I have multiple Autocomplete boxes on the page and I would like to create a global Reset button that clears all the select and input boxes. How can I access b ...

jqueryjquery-uijquery-ui-autocomplete

Effortless Online Cart with Session Variables Enhanced by AJAX Now Available

While I know there are countless tutorials online about how to add a shopping cart to your website, my situation is a bit unique. I currently have a functioning shopping cart that I built many years ago using ASP.NET session variables. It has served its pu ...

asp.netcookiesjqueryshopping-cart

Utilization of ValidationMessageFor

Is there a way to check for validation errors on a specific model property? Currently, I am using the ValidationMessageFor method to display error messages. How can I ensure that only one error message is shown at a time? The following are the model prope ...

c#jqueryasp.net-mvcasp.net-mvc-4fluentvalidation

Delete a pin that was added to the image through dynamic insertion

I am attempting to create a feature where clicking on an image element, which is dynamically added using jQuery, will remove it. This achievement is for a straightforward app that displays a pinned map-like image. HTML: <div class="imageMapContainer" ...

javascriptjquery

What is the best way to trigger a function following a user's selection from a form-control on a webpage?

I am looking for a way to automatically execute a function when a year is selected without needing a button. I am using HTML, JavaScript, and bootstrap 5. Any suggestions on how to achieve this? Thank you. function onSelect() { console.log('Hel ...

javascripthtmlwebbootstrap-4bootstrap-5

Achieving full height on a Bootstrap 4 row

I'm having difficulty getting a row to expand to occupy the remaining available height. I attempted to add h-100 to the row class, but this resulted in a white space at the bottom of the screen. I know there must be a solution out there, but I just ca ...

htmlcssgridbootstrap-4row

The margin in the DIV is not aligning correctly with the specified requirements

I encountered a puzzling issue with a small problem, and I am certain that I must be making a mistake somewhere. I experimented with two divs styled using different CSS. <div id="main"> <div id="internal"> hello </div> < ...

htmlcss

Can an iOS Bluetooth hybrid app be developed using a combination of HTML5, JavaScript, CSS3, and Xcode?

Hello fellow developers! This is my first time posting on Stack Overflow and I appreciate you taking the time to read my question :) I am delving into app development and aiming to create an Android and iOS app that can control hardware using Bluetooth co ...

androidioshtmlhybrid

Dynamic table sorting with JQuery using ajax for automatic updating of the table's header and body sections

I am currently working on integrating table sorting into a Rally app using dojo and the jquery tablesorter plugin. I am facing difficulty in setting up the update callback for the tablesorter. My HTML structure includes: <table id='myTable' ...

jqueryajaxdojorallytablesorter

Is there a way to update the value of a variable with the help of a checkbox?

When I check the checkbox, the specOrder const gets updated as expected. However, I am struggling to figure out how to remove the value when the checkbox is unchecked. Below is the code I have been working on: const SpecialtyBurgers = () => { cons ...

javascripthtmlreactjs

Provide alternative styling through css in instances where the Google Books API does not provide an image

How can I modify the CSS code to display the author and title of a book when there is no image available from the Google Books API? Currently, users see a custom image linked here, but it's not clear what it represents without the name and author inf ...

javascripthtmlcss

What is the best way to seamlessly switch between two different border styles?

Is it possible to smoothly transition from a dotted border to a solid one when hovering over an element? This task seems challenging with basic CSS techniques. ...

htmlcssbordertransition

Is it possible to use the jQuery .ajax() method to parse a javascript object that contains XML data?

Currently, I am facing a challenge parsing a javascript object that contains xml data within the .ajax() call using jquery. Can anyone provide guidance on how to accomplish this task? Any help would be greatly appreciated. Thank you! ...

javascriptjquery

Ways to stop the parent container from causing the child element set as fixed to scroll

When I have a parent and children with the property 'overflow:auto', scrolling the children causes the parent to start scrolling after it reaches the end. How can this be prevented? I do not want the parent container to scroll even after the chi ...

javascripthtmlcss

An iframe for the Vimeo player set to 100% of

I encountered some challenges while styling the Vimeo video I embedded. Here is the player I am using: I want the player to occupy the entire screen for all viewport sizes, so I applied min-width: 100vh and min-height: 100vw. I was able to adjust the wi ...

cssvue.jsvimeo-player

What is the best way to ensure that multiple SVG illustrations render smoothly while scrolling?

I created a layout of SVG line charts using the d3.js library. Each line chart is contained within its own <svg> tag inside a wrapper div structured like this: <div id="main-container" style="overflow-x: scroll"> <div class="wrapper-di ...

javascriptcssperformanced3.jssvg

Triggering a delayed onkeypress event in JavaScript

In my HTML form, I have an optional input field for a phone number, as well as two radio buttons (Leave Message, Don't Leave Message): <input type="text" class="input-medium phoneNum2" name="secondaryPhone" id="se ...

javascripthtmldom-events

Guide on dynamically loading email contacts options in selectize.js

I have been working with selectize.js to create an email contacts feature. However, I am facing an issue where the mail list retrieved from the database is displaying as undefined in selectize. Strangely, when I manually enter the return value, everything ...

javascriptjqueryasp.net-mvcselectize.js