Making adjustments to a Jquery data attribute can have a direct impact on CSS

My CSS is using a data attribute, but when I try to change it with jQuery, the change is not reflected on the screen or in the DOM.

$('#new-1').data('count', 5);
.fa-stack[data-count]:after {
  position: absolute;
  right: -20%;
  top: -20%;
  content: attr(data-count);
  font-size: 90%;
  padding: .4em;
  border-radius: 999px;
  line-height: .75em;
  color: white;
  background: rgba(255, 0, 0, 1);
  text-align: center;
  min-width: 1.5em;
  font-weight: bold;
}
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<span id="new-1" class="fa-stack fa has-badge" data-count="0">
<i class="fa fa-user-circle fa-stack-1x"></i>
</span>

javascriptjqueryhtmlcss

Answer №1

$('#latest-1').attr('data-number', 5);

Answer №2

For the latest information on this topic, be sure to check out JQuery's documentation at this link.

It is clearly mentioned that when updating data using the data() method, it does not impact attributes in the DOM. To set a data-* attribute value, the recommended approach is to use attr.

To set a data-* attribute value, make use of the .attr("key", value); function instead of data().

Therefore, for setting the data-count attribute with a value of 5, you can use the following code:

$('#new-1').attr('data-count', 5);

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

Exploring the contrast: resolve() versus fulfill() in q.js

I'm finding it difficult to understand the distinction between calling a resolver's resolve() as opposed to fulfill(). Both functions and terms "resolve a promise" and "fulfill a promise" are frequently used interchangeably. Can you provide guid ...

javascriptasynchronouspromiseq

Endless looping of numerous consecutive animations

Is it possible to apply two animations to an element using only CSS and without the need for JavaScript? These animations should run sequentially an infinite number of times. @keyframes show { from, to { z-index: 100; } } @keyframes wait { ...

csscss-animations

Using Ajax to dynamically generate column headers in Datatables

Is there a way to create a header title from an ajax file? I've been trying my best with the following code: $('#btntrack').on('click', function() { var KPNo = $('#KPNo').val(); var dataString = & ...

javascriptphpjqueryajaxdatatables

Unable to receive acknowledgment from child component within Redux

I am trying to retrieve props from Redux within a child component, but for some reason, {this.props} is showing up as an empty object. While I am successfully using react-redux connect to access the props in the parent component and pass them down to the ...

javascriptreactjsreduxreact-redux

Using Angular, implementing conditional statements within a for loop

I am currently working on a project where I have an array being looped inside a tag, using the target="_blank" attribute. The issue is that one of the elements in the array should not have this target="_blank" attribute. What would be the best course of ...

javascriptangular

How to efficiently target and manipulate links using jQuery Mobile

I previously asked a question about loading an external page without ajax while maintaining it as an iOS web app window. In that example, I used the following code: <script> $(document).bind('pageinit', function() { $("#test").click(func ...

javascriptjqueryiosjquery-mobile

Injecting data into a Q promise

I'm facing some issues related to what seems like JavaScript closures. In my Express + Mongoose web application, I am utilizing the Q library for Promises. I have a question regarding passing request data to the promise chain in order to successfully ...

javascriptnode.jsexpresspromiseq

When I try to use Node.js and Express, I encounter an issue where I receive the

I recently developed a basic application. Everything was running smoothly until I decided to organize the code using an MVC template. However, now when you visit localhost:3000/add-service, you are greeted with a "Cannot Get /add-service" error message. W ...

javascriptnode.jsexpress

Executing a personalized function within a Server Component with the Next JS App Router while the application is running

In my server component Home, I call the function getMyAge: // app/page.tsx import { getMyAge } from './utils/datetime'; export default function Home() { return ( <Page> <Paragraph>I'm {getMyAge()} years old</Parag ...

javascriptreactjsnext.js

Obtaining the domain from a cookie using AngularJS

I've encountered a issue with removing cookies from my browser when logging out. It seems that I need to specify the domain in order to remove them correctly. $cookies.remove('Name',{domain:'.test123.com'}); My goal is to automat ...

javascriptangularjscookies

Splitting a list of accordions into two columns with CSS and React - a step-by-step guide!

I am looking for a way to showcase a list of Accordions in a two-column layout. Each Accordion consists of both a Summary and Details section, with the Details being visible only when the Summary is clicked. Unfortunately, I won't delve into the imple ...

htmlcssreactjscss-grid

Having issues with Promise.resolve() not functioning as expected in a Jasmine test

I am currently working on setting up a test that involves promises. Below is the code snippet for reference: var promise; beforeEach(inject(function ($q) { promise = $q.resolve(); })); it('should resolve', function (done) { promise.the ...

javascriptangularjsunit-testingjasmineangular-promise

Using ASP.NET MVC to generate dynamic CSS styles

I am seeking a solution that will allow me to achieve the following objectives: Retrieve dynamically generated CSS from an action method Select a CSS file based on request parameters or cookies Utilize a tool for combining and compressing (minifying) CS ...

c#.netasp.net-mvccss

Implementing a click event on an image in an Angular 4 application

I'm facing an issue with adding a click event to an image within an Angular component. I have tried the following code: <img src="../../assets/add.svg" width="18" height="18" (click)="addItem()"> However, this approach does not seem to work as ...

htmlcssangular

Using HTML5 Server-Sent Events (SSE) in conjunction with JSON and PHP

Struggling to implement HTML5 Server Sent Events that update a webpage with JSON data, I have scoured through numerous info sites and tutorials online without finding any suitable for beginners like myself. Even after exploring similar questions on StackE ...

phpjsonhtml

Ways to transmit information from a modal to a function

Trying to figure out how to update data in an ng-grid after submitting a modal form with multiple text input controls. Should the ajax create function be called within the $scope.open controller section or resolve? $scope.open = function (size) { var mo ...

javascriptjqueryruby-on-railsajaxangularjs

Steps to resolve the error "Cannot POST /index.html" in Nginx, Express, and NodeJS

While setting up my MERN project on the production server, I encountered an issue. In order to manually type in URLs (like myproject.com/dashboard), I added the line try_files $uri /index.html; to the server section of my Nginx configuration file as recomm ...

javascriptnode.jsexpressnginxreact-router

Encountered an error while trying to run npm start

I set up a Vagrant virtual machine, installed Node.js (v 6.9.1), and NPM (v 4.0.0). After cloning a Node.js app using Git clone, I ran the npm install command in both the root folder and the app folder. However, when attempting to start the app with npm st ...

javascriptnode.jsnpmvagrant

Retrieve HTML elements from a string using PHP

Possible Matches: crawling a html page using php? Best methods to parse HTML I am trying to extract DOM elements from a string variable in my PHP script that contains an HTML page. How can I achieve this? For instance, if the string is something ...

phphtmlstringdomdocument

Inquiry regarding JSON data format

I am receiving the following response when I console.log(result): {"MSG":"WRONG","QUESTIONID":182.0} However, when I specifically target result.QUESTIONID and console.log it, I get: undefined Can anyone point out what mistake I am making? ...

jqueryajaxjson