If the item has an active class, apply a new class to the parent element and all of its

If I have code like the example below and want to add the show class to the parent and ancestors.

// The last `nav-item` has the `active` class
<div class="nested-group nested-item show">
  <div class="nested-item show">
    <div class="nested-item show">
      <div class="nested-item show">
        <a class="nav-item active" href="#">Lorem</a>
        <a class="nav-item" href="#">Ipsum</a>
      </div>
    </div>
  </div>
</div>

// The last `nav-item` does not have the `active` class
<div class="nested-group nested-item">
  <div class="nested-item">
    <div class="nested-item">
      <div class="nested-item">
        <a class="nav-item" href="#">Lorem</a>
        <a class="nav-item" href="#">Ipsum</a>
      </div>
    </div>
  </div>
</div>
javascriptjqueryhtmlcss

Answer №1

If you want to target all the parent or ancestors elements with the class nested-item, you can make use of the .parents() method.

$('.active.nav-item').parents('.nested-item').addClass('show');
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="nested-group nested-item ">
  <div class="nested-item ">
    <div class="nested-item ">
      <div class="nested-item ">
        <a class="nav-item active" href="#">Lorem</a>
        <a class="nav-item" href="#">Ipsum</a>
      </div>
    </div>
  </div>
</div>

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

Is there a way to retrieve the hand-drawn lines at no cost in the form of a list, with each line represented as a collection of coordinates

I am currently contemplating the idea of utilizing fabric.js for an online handwriting recognition system. In order to make this system work, I need to transmit the sketched lines as a collection of lines, where each line consists of several points. If a ...

javascripthtmlcanvasdrawingfabricjs

Struggling with a filtering and sorting problem in my code, looking for some assistance

I'm encountering an issue with an isotope filter menu. The goal is for it to load data based on a timestamp and allow filtering. However, there seems to be a conflict between my sortBy script and the filter script. Below is the code in question: Sor ...

jqueryhtmlcssjquery-isotope

Is it possible in RxJS to configure a ReplaySubject (or equivalent) that replays the latest messages with a distinctive identifier?

Is it possible to create a generic code that behaves like a ReplaySubject but emits each most recent message with a unique name upon subscribing? In the script below, the current output is... I want this to be logged once ... received the latest bbb 5 I c ...

javascriptangularrxjs

Is it possible to use a webcam to scan a QR code directly into a webpage?

Is it possible to enable users to input data on a webpage using QR code scanning? I'm unsure if there is a tool that can be integrated into the page or paired with a library to make this happen, or if I need to consider an external solution beyond th ...

c#javascriptasp.net-mvcwebbarcode-scanner

How to Insert PHP/MySql Data into JavaScript

As I delve deeper into PHP OOP, I feel like I'm making progress in transitioning my website. Currently, each user has their own page with a javascript grid tailored to their specific needs. For easier maintenance, I'm considering the idea of havi ...

phpjavascriptmysql

Even with the use of setTimeout, Angular 5 fails to recognize changes during a lengthy operation

Currently, I am facing an issue with displaying a ngx-bootstrap progress bar while my application is loading data from a csv file. The Challenge: The user interface becomes unresponsive until the entire operation is completed To address this problem, I a ...

javascriptangulartypescriptsettimeoutangular-changedetection

Retrieving the XML data from an uploaded file using PHP

How can I upload an XML file to my server and extract its content? Step 4: Writing each row from the XML file into a database. This is my current attempt: xml_import.php <?php if(isset($_POST["submit"])){ echo "Let's test"; $uploaddir ...

phpxmlhtml

Problem with Jquery Colorbox in firefox

I am using JavaScript to dynamically populate anchor links in a repeater and displaying them in a colorbox iframe. This functionality is working well in IE7, Safari, and Chrome, but encountering an issue in Firefox (version 14.1). In Firefox, the links ar ...

javascriptjqueryasp.netcolorbox

Navigating through history using the pushState method and incorporating back and forward buttons

I am trying to implement back and forward buttons functionality with this ajax method The code is working well, and the URL in the browser is changing as expected However, when I click on the back and forward buttons, nothing happens (function(){ ...

javascriptajaxhtmljquery

What is the best way to implement a JSON object within an <img> src attribute?

Currently, I am in the process of creating a dynamic Vuetify navigation drawer and I have the intention of storing images in a JSON array. My main inquiry revolves around figuring out if it's feasible to extract the image attribute and incorporate it ...

htmljsonvuetify.js

Ways to create dynamic functionality with JavaScript

I need to iterate through the document.getElementById("b") checked in a loop. Is this achievable? How can I implement it? <img class="img-responsive pic" id="picture" src="images/step1.png"> <?php //get rows query ...

javascriptphploops

Show an AJAX loading animation for a minimum of 2 seconds

I've been struggling to find a solution for this issue and none of the resources I've looked at have provided a satisfactory answer. Currently, I am using .load calls to fetch data from the database and display it in a div with the class "conten ...

jqueryajax

Developing Attributes in JSON

Greetings stackOverflow Community, I'm struggling a bit with creating JSON objects. I have code snippet that is meant to populate a list called members with names, and then add a property to each of those names. Here is the specific snippet in questi ...

javascriptjsonnode.js

Exploring nested objects in Javascript through iterating and extracting all properties in a continuous loop (Updated)

In my code, I created an object with two sub-objects structured like this: var testObject = { "page":{ "type": "ePurchase", "title":"Purchase confirmation" }, "user": { "name": ...

javascript

Guide: "Sending an AJAX request upon selecting an item in a Vue.js 'Select' element using vue-resource"

Is it possible to send an ajax request through vue-resource when a specific item is selected from a "Select" in vuejs? Check out the demo here: https://jsfiddle.net/xoyhdaxy/ <div class="container" id="app"> <select v-model="selected"> ...

javascriptajaxvue.js

Is there a newer alternative to the jQuery UI Draggable component available?

In search of draggable/sortable functionality for my .NET Razor Pages application. Came across the jQuery UI Draggable/Sortable component which I've used years ago with success. However, it's mentioned on the download page that the component is ...

javascriptjqueryjquery-uidraggablejquery-ui-draggable

After the automation is finished, I am interested in outputting the IMDB rating of a movie or series to the terminal

I prefer using Google search to find the element because I find it easier to navigate compared to IMDB. import selenium.webdriver as webdriver print("This script is designed to retrieve the IMDb rating of a movie or TV series!!!") def get_results(search_ ...

htmlcssseleniumwebweb-crawler

When attempting to remove an object from an array in Vue.js, an error may occur stating that the property of the

In my project, I am working with 3 files: App, BlogList, BlogItem. The goal is to enable users to delete a post if they choose to. However, when using splice method, I encountered the following error: The property or method "removePost" is not defined o ...

javascriptvue.jsvuejs2vue-component

Steps to displaying a genuine Docx file within a Material CardMedia

Currently, I am facing an issue with positioning a docx file in my app. Interestingly, jpg and mp4 files are displaying correctly, but the docx file is not positioned as expected. If you want to try it out, simply open a doxc file. In the FileContentRend ...

javascriptreactjsmaterial-uidocx

firefox is experiencing lag issues with react-spring and framer-motion

Encountering an issue with two animation libraries, react-spring and framer-motion. Attempting to create a basic animation that triggers upon the component's initial visibility (simplified version). <motion.div initial={{x: -25, opacity: 0}} anima ...

cssreactjsanimationreact-springframer-motion