Is it possible to exclusively focus on the specified data attributes?

Is there a method to specifically target the 'data-season' attribute with the value "winter"?

This is my HTML:

<li data-season="summer">summer
  <ul class="groups">
   <li data-item="beach">beach</li>
   <li data-item="Hawaii">Hawaii</li>
   <li data-item="Beach Ball">Beach Ball</li>
   <li data-item="hot sun">hot sun</li>
  </ul>
</li>

<li data-season="winter">winter
  <ul class="groups">
   <li data-item="snow">snow</li>
   <li data-item="glacier">glacier</li>
   <li data-item="hot soup">hot soup</li>
   <li data-item="snow man">snow man</li>
   <li data-item="heater">heater</li>
  </ul>
</li>

I have obtained the string "winter" from my jQuery function,

Now, I want to apply CSS only to snow, glacier, hot soup, snow man, and heater without affecting summer. How can I achieve this?

Answer №1

  $('[data-item="summer"]').css('background':'blue');

or

  bar = 'summer';
  $('[data-item="'+bar+'"]').css('background':'blue');

DEMO

ps this also works with css rules

 [data-item="summer"]{
     border:1px solid blue;
 }

Answer №2

After encountering a similar challenge and dedicating time to resolving it, I discovered that dynamically created objects do not function properly when utilizing the .data() method. To circumvent this issue, I opted to assign an attribute on each object with the same name as the key passed to the data() function.

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

Production website fails to display updated data while the localhost version operates without issues

Having trouble fetching data from my database in a production setting. The code functions fine on localhost, but fails to grab updated data when live. Below is the relevant snippet: import {connect} from "@/dbConnection/dbConnection"; import Post ...

Angular 7 - Creating tooltips with multiline text

I've utilized template strings to create a multi-line string. toolTip = ` ${Test} : ${number} ${Test} : ${number} ${Test} : ${number} ${Test} : ${number} ${Test} : ${number}}`; The issue I'm facing is that w ...

Discover the Color's Value in Relation to a Different Color

When it comes to my CSS, I like to use .scss to make as many variables as possible. It's easy to create a variable for one color, like $primary-color. From there, I want to work with different shades of that color, which I can easily pinpoint using Ph ...

Struggling to align elements in React/JS/M?

My challenge is aligning the elements in the middle of my page. I aim to have 3 elements per row, with n rows depending on the number of "VideoBox" components. It's crucial that these elements fit within the lettering of the P R O F E S S I O N A L ...

The Jquery ajax get method is malfunctioning

I've been trying out this code but it doesn't seem to be working. Apologies for the basic question, but I'm curious to understand why it's not functioning as expected. $(document).ready(function(){ $("button").click(function(){ ...

Does anyone have tips on how to upload images to MongoDB using React?

Currently, I am working on a project that requires an image upload feature for users. These images need to be stored in MongoDB so that they can be viewed by the user later on. Can anyone offer assistance with this? I have successfully configured my datab ...

Adjustable / consistent box height

For hours, I've been attempting to make some divs the same height. Check out my JSfiddle here: https://jsfiddle.net/4cj5LbLs/15/ I experimented with using display: table; in the parent element and either display: table-cell; or display: table-colum ...

What is the best way to pass card data between Vue.js components?

My application consists of two components: DisplayNotes.vue, which displays data in card format retrieved from the backend, and UpdateNotes.vue, which allows users to update existing data by opening a popup. The issue I'm facing is that when a user cl ...

What is the functionality of the "respond_with_navigational" feature?

Currently, I am integrating Devise and DeviseInvitable to handle authentication in my application. However, I'm facing challenges when trying to incorporate AJAX functionality into InvitationsController#update. The structure of the controller in Devis ...

Navigating variable columns and rows in a static column table

Here is a preview of how my table will appear: <table> <thead> <tr> <th>Name</th> <th>Week 1</th> <th>Week 2</th> <th>Week 3</th> </tr> < ...

The menu bar becomes distorted when the page is zoomed out

Hey everyone, I could really use some assistance with my menus. Whenever I zoom out of the page, they become distorted. Here is the link to my website: https://dl.dropbox.com/u/22813136/Finding%20Nemo%20Inc/FNemo_front.htm# I tested the link on Internet E ...

Trouble with the ejs <%- body %> rendering properly

I plan to utilize a predefined layout template named layout.ejs, and here is the code present in the file: <html> <head> <title></title> </head> <body> <%- body %> </body> </html> Currently, I ...

Preventing div elements from being highlighted when double-clicked

I'm working with a div element that has a background image and I need help figuring out how to disable the highlighting effect when double-clicking on it. Is there a CSS property that can achieve this? ...

Tips for verifying that one of the two input fields is filled in Bootstrap 5 validation

I have implemented Bootstrap validation for the other input fields in this form by using the 'required' attribute. However, for these two specific fields, if at least one is not empty, then the form should be submitted. <form class="needs ...

What could be causing the background color not to change on the HTML page with Bootstrap?

Learning html, bootstrap, and css styling can be a confusing endeavor. Sometimes things don't work as expected, like changing the background color. Despite following what seems like a simple solution after googling, the background color remains unchan ...

Struggling with sending a post request in Node.js as the response always returns with an empty body

Here is the structure of my project And this error pops up when I run my program using npm run dev command I'm working on a basic webpage where users can input their name, email, and job details. I then try to insert this information from the HTML fo ...

Using DraftJS to swap text while preserving formatting

Currently, I am implementing Draftjs with draft-js-plugins-editor and utilizing two plugins: draft-js-mathjax-plugin and draft-js-mention-plugin My goal is to replace all mentions with their corresponding values when the user uses '@' to mention ...

Conceal the Standard Select Dropdown Arrow in Internet Explorer 9

VIEW DEMO I attempted to use the CSS property appearance: none; to hide the select dropdown arrow, but it still shows in IE9. Refer to the image for clarification. Does anyone have a solution to hide the arrow using either CSS or jQuery? Below is my cod ...

Is it possible to combine Bootstrap 2.3.1 with newer versions such as 4.0 or 3.x.x?

My current website is built using Bootstrap 2.3.1, but now I am looking to update to a new version of Bootstrap. However, when I tried updating, the entire UI changed drastically and the website started to look clumsy. Instead of completely replacing the ...

Configure webpack to source the JavaScript file locally instead of fetching it through HTTP

Using webpack.config.js to fetch remote js for Module Federation. plugins: [ new ModuleFederationPlugin({ remotes: { 'mfe1': "mfe1@http://xxxxxxxxxx.com/remoteEntry.js" } }) ], Is it possible to incorporate a local JS ...