Append the class to the div element

Hey there, I'm dealing with a div tag that looks like this:

<div id = "product-tabs" class="gen-tabs gen-tabs--style1">

Now, I have to add 'accor' to the end of the class section, so it would look like this:

gen-tabs gen-tabs--style1 accor

I was thinking of achieving this using jQuery. Here's what I have so far:

$(window).load(function(){
    $(".product-2-square-furniture-leg").parent(".gen-tabs--style1").addClass(".accor");    
})

This code is meant to run on a specific page where the body is product-2-square-furniture-leg. Maybe I'm not getting the path to the element right?

jquerycssclass

Answer №1

Get rid of the . (period) in your class name

$(window).load(function(){
    $(".product-2-square-furniture-leg").parent(".gen-tabs--style1").addClass("accor");    
})

The addClass() function already specifies it as a class, so you don't need to include the period when using methods like hasClass, addClass, removeClass

Additionally, personally, I prefer using closest() instead of parent() (and find() instead of children()). I'm not sure if there's a difference in speed, but since you're using jQuery, speed probably isn't a major concern, right?

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

I desire to incorporate a subtle fading effect into the script

I have written the script code and now I am looking to add a fade effect to it. Can anyone guide me on how to achieve this? Your help is much appreciated! ※I used an online translator as English is not my native language. Please bear with any awkward ph ...

javascripthtmljquerycss

Creating a hover effect for a specific card while maintaining the rest of the cards unaffected

When hovering over a card, all icons are displayed instead of just the icons for that specific card. I want to show only the icons for the card being hovered on (example output: image). The cards are generated automatically using v-for and fetching data fr ...

javascripthtmlcssvue.jssass

Tips for merging two text boxes in a form with CSS

Is it possible to combine two text boxes in a form using CSS, similar to the design on Tumblr's login page at ? If CSS is not the solution, what alternative methods can be used? Any assistance would be greatly appreciated. I am aiming to enhance the ...

htmlcssformsinputtextinput

How can DataTables (JQuery) filter multiple columns using a text box with data stored in an array?

I've been attempting to create a multi-column filter similar to what's shown on this page () using an array containing all the data (referred to as 'my_array_data'). However, I'm facing issues with displaying those filter text boxe ...

javascriptjquery

Tips for extracting information from a JSON file using $routeParams in AngularJS

https://i.stack.imgur.com/NQCpy.png I am currently encountering an issue with retrieving data using $routeparams. Here is a description of my problem: Retrieving the URL to redirect console.log($routeParams); console.log($routeParams.json_url); $.getJS ...

javascriptjqueryangularjsjson

Text field value dynamically changes on key press update

I am currently working on the following code snippet: {% for item in app.session.get('aBasket') %} <input id="product_quantity_{{ item['product_id'] }}" class="form-control quantity" type="text" value="{{ item['product_quan ...

javascriptjqueryhtmlajaxonkeyup

Is it possible to utilize Dictionaries (key, value) collections with JQuery?

Is jQuery capable of supporting a collection of Dictionaries which consists of keys and values? I am interested in organizing the following data into a structured format: [1, false] [2, true] [3, false] This structure should allow for adding, looking up ...

javascriptjquerycollectionsdictionary

Adjust the width of an element as its content dynamically shifts

I have a container that contains 6 input fields. Two of them are initially hidden (display: none), but when I click on a checkbox, these two inputs become visible (display: inline). I need the width of the container to adjust and increase when the other tw ...

htmlcss

Date parsing error thrown by jQuery datepicker plugin

What could be causing the InvalidDate exception when attempting to parse the date using $.datepicker.parseDate("mm/yy","02/2008");? ...

javascriptjquerydatedatepicker

Scroll bar displayed on a non-editable text box

The TextArea is currently set to readonly mode using "ng-readonly," which is causing the scrollbar-thumb not to appear. It's important to note that I am not utilizing webkit in this scenario. Below is the HTML code being used: <textarea dataitemfq ...

javascripthtmlcss

The Java compiler handling static final variables differently depending on how they are assigned

After compiling the following code: public static final boolean FOO = false; public static final void fooTest() { if (FOO) { System.out.println("gg"); } } I noticed that the method fooTest() {} is empty. However, when I compile the code b ...

javaclassjavacfinal

Automatically determining the optimal quality from various sources tailored to the individual user - jwplayer

Check out the code snippet below: var playerInstance = jwplayer("mySingleVideoWrapper").setup({ image: getCurrentPosterSrc, sources: [ { file: 'file-360.mp4', label: "360p" ...

htmlcssjwplayerjwplayer7

Ensuring Form Validation in Symfony 2.0 View

I am currently using Symfony 2.0 and I have a view file called test.html.php which includes a form: <form action="" method="post" rel=""> <input type="hidden" name="action" value="test" /> <input name="myinput" type="text" value="" ...

phpjqueryhtmlajaxsymfony

When jQuery adds new elements, their CSS may not be applied accurately

One issue I encountered is using jQuery to dynamically add new elements, only to find that the CSS isn't being applied correctly to the newly added element. To illustrate this problem, I created a jsFiddle. In the example, there are differences in sp ...

jquerycsstwitter-bootstrap

I am interested in creating a table that can toggle between show/hide mode with a plus/minus feature

$(document).ready(function() { $("#t1").hide(); // hide table by default $("#close").hide(); //hide the minus button as well if you only want one button to display at a time $('#sp1').on('click', function() { //when p ...

javascripthtmlcssbootstrap-4

JavaScript - Attempting to retrieve data using AJAX

Struggling with extracting data from an AJAX call using jQuery while implementing RequireJS for better maintainability and modularity in my JavaScript. Still new to RequireJS so not entirely sure if I'm on the right track. Just aiming to keep my JS mo ...

javascriptjqueryajaxrequirejs

Is it possible to include multiple src URLs for the same image in an HTML document?

Is it possible to include multiple src URLs for one image in HTML? ...

csshtml

How to locate every JavaScript event connected with an HTML element by utilizing Google Chrome

Looking for an easy method to identify all JavaScript events linked to a specific HTML element in Chrome? For example: HTML element <a href="#" class="cancel_link refresh_page">Cancel</a> Script: <script type="text/javascript"> $ ...

javascriptjqueryhtmlgoogle-chrome

Enhancing a character's appearance with custom CSS styling

In my code, I want to highlight a single character throughout the page. I want the lines between each word to be a different color from the rest of the text using CSS, without having to add span tags to each one individually. Anti-virus End Point | Dis ...

htmlcss

Is there a way to connect two tables using CSS pseudo-selectors?

Is there a way to make two separate tables interact with each other using CSS pseudo-selectors? I have a data table and an auto-numbered table, and I want the rows to highlight in both tables when hovering over a cell in one of them. I've tried using ...

javascripthtmlcssreactjscss-selectors