Step-by-step guide on replicating the style of a div class

Question

Step-by-step guide on replicating the style of a div class

I'm attempting to create a comments counter div that changes color based on the number of comments. If there are 0 comments, the div should be red, and if there are more than 0 comments, the div should be blue. However, I am encountering an issue with JavaScript duplicating the same colors.

$(function () {
    if(parseInt($(".notification-counter").text()) > 0) {
        //$(".notification-counter").hide();
        $('.notification-container').addClass('notification-container2');
    }
});

Check out the code here: http://jsfiddle.net/783h57zy/10/

Thank you for any assistance!

javascript jquery css

Answer 1

Answer №1

To traverse through each of the divs, you will need to utilize the .each() function along with $(this):

$(function () {
    $('.notification-container').each(function () {
        if (parseInt($(this).text()) > 0) {
            $(this).addClass('highlight');
        }
    })
});

View jsFiddle demo

Answer 2

To traverse through each of the divs, you will need to utilize the .each() function along with $(this):

$(function () {
    $('.notification-container').each(function () {
        if (parseInt($(this).text()) > 0) {
            $(this).addClass('highlight');
        }
    })
});

View jsFiddle demo

Answer 3

Answer №2

$(document).ready(function () {
$('.notification-counter')
  .filter(function() {
      return $(this).text() >= 0;
  }).parents('.notification-container')
  .addClass('new-notification-style');
});

View code on jsfiddle

Answer 4

$(document).ready(function () {
$('.notification-counter')
  .filter(function() {
      return $(this).text() >= 0;
  }).parents('.notification-container')
  .addClass('new-notification-style');
});

View code on jsfiddle

Answer 5

Answer №3

To achieve the desired result, it is important to loop through each element and then modify the class accordingly.

Make sure to make the following changes in your code:

$(function () {
    $(".notification-counter").each(function(){
    if(parseInt($(this).text()) > 0) {
        //$(".notification-counter").hide();
        $(this).parent().addClass('notification-container2');
    }
    });

});

You can view the updated version on this fiddle - http://jsfiddle.net/783h57zy/12/

Answer 6

To achieve the desired result, it is important to loop through each element and then modify the class accordingly.

Make sure to make the following changes in your code:

$(function () {
    $(".notification-counter").each(function(){
    if(parseInt($(this).text()) > 0) {
        //$(".notification-counter").hide();
        $(this).parent().addClass('notification-container2');
    }
    });

});

You can view the updated version on this fiddle - http://jsfiddle.net/783h57zy/12/

Answer 7

Answer №4

To properly adjust the styling of your divs, you should iterate through them individually:

Utilize $.each to loop through the div elements.

Refer to '.parent()' to access the parent container div.

Use $(this) to reference the current element being processed.

$(function () {
    $('.notification-counter').each(function () {
        if (parseInt($(this).text()) > 0) {
            $(this).parent().removeClass('notification-container').addClass('notification-container2');
        } else {
            $(this).parent().removeClass('notification-container2').addClass('notification-container');
        }
    });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="notification-container">
    <div class="notification-counter">200</div>
</div>
<div class="notification-container">
    <div class="notification-counter">0</div>
</div>

Answer 8

To properly adjust the styling of your divs, you should iterate through them individually:

Utilize $.each to loop through the div elements.

Refer to '.parent()' to access the parent container div.

Use $(this) to reference the current element being processed.

$(function () {
    $('.notification-counter').each(function () {
        if (parseInt($(this).text()) > 0) {
            $(this).parent().removeClass('notification-container').addClass('notification-container2');
        } else {
            $(this).parent().removeClass('notification-container2').addClass('notification-container');
        }
    });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="notification-container">
    <div class="notification-counter">200</div>
</div>
<div class="notification-container">
    <div class="notification-counter">0</div>
</div>

Answer 9

Answer №5

With multiple instances of the same class present on the page, it is necessary to iterate through each instance and analyze them individually before making any decisions.

$(function () {

    $('.notification-counter').each(function(){

        if( parseInt($(this).html()) === 0 ) {
            $(this).addClass('notification-container2');
        }

    });

});

See the updated version here: http://jsfiddle.net/783h57zy/14/

Answer 10

With multiple instances of the same class present on the page, it is necessary to iterate through each instance and analyze them individually before making any decisions.

$(function () {

    $('.notification-counter').each(function(){

        if( parseInt($(this).html()) === 0 ) {
            $(this).addClass('notification-container2');
        }

    });

});

See the updated version here: http://jsfiddle.net/783h57zy/14/

Step-by-step guide on replicating the style of a div class

Answer №1

Answer №2

Answer №3

Answer №4

Answer №5

Similar questions

What steps should be taken to ensure that my nodeJS server can maintain the identity of a specific user?

The significance of the "$=" or "?=" symbols in lit-element illustrations

Having trouble with retrieving data from a JSON file through a service in Angular 4? Getting an "unexpected end of input" error?

Issue with Tanstack React Query failing to import

The css fails to display properly upon the page being reloaded using a button

Getting directions using the node-googlemaps module in node.js can be achieved by following these steps

Converting Jquery to Vanilla JavaScript for Bootstrap Scroll Function

I encountered a blank page issue when incorporating ui.bootstrap into my controller within Angular

Issues arising from parsing JSON with JQuery

"Items within mui Grid do not properly align within the Grid container

Include a proximity button onto the tabs

Unspecified response from Axios in NodeJS API when logging to console

Tips for preserving scroll position within a division following the redisplay of a division in Vue.js

When attempting to install material UI in my terminal, I encounter issues and encounter errors along the way

Vue 3 has officially deprecated the use of ::v-deep as a combinator. Going forward, please utilize ::v-deep(<inner-selector>) instead

Eliminate Element Node Issue

Retrieving the smallest and largest values of a Django model attribute within a template

Understanding the outcomes of CSS media queries

Guide on moving the parent <div> at an angle within an AngularJS custom directive

fileuploader with clipboard functionality and easy drag-and-drop feature using HTML and JavaScript