Implementing JavaScript functionality based on a specific body class

Is there a way to execute this script only on a specific page with a particular body class? For example, if the page has

<body class="category-type-plp">

How can I target my script to work specifically for "category-type-plp"?

plpSpaceRemove: function() {

    $(document).ready(function() {
          if ($('.bv-tile.bv-inline-rating-outer').length % 4 === 0) {
            for (let i = 0; i < ($('.bv-tile.bv-inline-rating-outer').length / 4); i++) {
              let remove = true;
              $('.bv-tile.bv-inline-rating-outer').slice(i * 4, 4 * (i + 1)).each(function() {
                  if ($(this).find(".bv-stars-wrap

                      ").length != 0) {
                      remove = false;
                    }
                  });
                if (remove) {
                  $('.bv-tile.bv-inline-rating-outer').slice(i * 4, 4 * (i + 1)).each(function() {
                      if ($(this).find(".bv-stars-wrap

                          ").length === 0) {
                          $(this).css("display", "none");
                        }
                      });
                  }
                }
              }
              else {
                for (let i = 0; i < ($('.bv-tile.bv-inline-rating-outer').length / 3); i++) {
                  let remove = true;
                  $('.bv-tile.bv-inline-rating-outer').slice(i * 3, 3 * (i + 1)).each(function() {
                        if ($(this).find('.bv-stars-wrap

                            ').length != 0) {
                            remove = false;
                          }
                        });

Answer №1

One way to determine if your body element contains a specific class is by checking with the following code:

if (!$('body').hasClass('some-class')) return;

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 manage date formats across all components using a single method in Angular?`

I need assistance with controlling the date format of dates displayed in different components using one typescript file. How can I achieve this? app.ts import { Component } from '@angular/core'; @Component({ selector: 'app-root', ...

Validating decimals in a text field with either JavaScript or jQuery

I need to implement text field validation on the keyup event. The text field should only accept money type decimals such as: (12.23) (.23) (0.26) (5.09) (6.00) If any incorrect value is entered, it should revert back to the previous value and remove the ...

Is there a more efficient way to consolidate multiple functions like this into one cohesive function instead of having to define each one separately?

After attempting to implement a loop without success, I also considered using regex but that did not work either. The code in question is part of a larger project that involves dynamically adding and deleting fields using jQuery. The classes and ids used f ...

Alter Express routes automatically upon updating the CMS

Currently, I am working on a project that utilizes NextJS with Express for server-side routing. lib/routes/getPages const routes = require('next-routes')(); const getEntries = require('../helpers/getEntries'); module.exports = async ...

how to make a "select all" checkbox with Angular 2

`I'm currently working on a feature that allows a checkbox to select all checkboxes within a specific div when checked. The div exclusively contains checkboxes. //TS FILE constructor() { } checkAll: ElementRef | undefined; selectAll(isChecked: ...

Utilizing CSS to incorporate percentage points

Currently, I am facing a challenge in implementing a vertical line with percentage marks. It needs to be positioned relative to the percentage bar, just like how it appears in the screenshot below: https://i.stack.imgur.com/CNWUV.png I attempted a basic ...

Access the specific scope I established in Angular console, excluding the entire scope

Is there a way to access only the $scope elements (variables and functions) created in my controller without getting everything ($$childTail, $$childHead, etc)? I know if I use: angular.element(document.querySelector('<selector-name>')).sc ...

Combining various components within an inactive element tag using Vue

I am working on creating expandable rows for a table element using this HTML code snippet. The current approach involves alternating between parent rows and multiple rows within tbody elements. <tbody class="js-table-sections-header">Parent row</ ...

"Exploring the world of Typescript's return statements and the

I'm currently grappling with a design dilemma in typescript. Within my controller, I perform a validation process that can either return a 422 response, which ends the thread, or a validated data object that needs to be utilized further. Here's a ...

Problem with automatic saving of workspaces in DBeaver

Currently using DBeaver with Oracle server and encountering a recurring error related to workspace save. I have searched online for a solution, but all results seem to focus on meta data explanations. As someone new to DBeaver, I would greatly appreciate ...

Generating images using Node.js and GraphicsMagick

I'm looking for a way to generate an image using graphicsMagick and node.js. Typically, I can achieve this with the following command: gm convert -background transparent -pointsize 30 -gravity Center label:türkçee HEEEEEY.png But I need to replic ...

Commencement of timeline utilizing amchart's gantt feature

I am currently utilizing the Gantt chart feature in Amchart. The chart segments are organized based on dates. I am looking to specify a specific initial location for the chart's navigator between two dates, rather than having it applied across the en ...

Directive unable to recognize ng-pattern functionality

I am attempting to encapsulate an <input> within a directive in order to manage date validation, conversion from string to Date object, and keep the Date version in the original scope. The functionality seems to be working as intended. However, the n ...

The container or row I placed in the middle of the page content is not anchored to the bottom like it should be for footer widgets

I'm struggling with the code I've extracted. How can I move the footer widget to the bottom of the page? On some pages, the footer displays at the bottom because there isn't much content, but on one specific page, it appears in the middle of ...

Snap to the top of the table with merged columns using scroll feature

I am currently attempting to create a table with horizontal scrolling and snapping behavior for the yellow header columns that span multiple columns. These headers should snap to the end of the red column, while always maintaining alignment at the beginnin ...

Don't use onchange() in place of keyup()

Issue: I am facing a problem where the keyup() function is calling ajax multiple times with each key press, and I have tried using onChange() but it did not work as expected. Here is the code to check if an email already exists in the database: $.noConf ...

What happens when the user closes a notification in GetUIkIt 3?

Is there a way to detect when a UIKit notification has been closed? The UIkit notification plugin () mentions that it has a close event. Can this be utilized for notifications triggered programmatically as shown below? e.g. UIkit.notification({ mess ...

What could be causing Mathjax to generate multiple copies?

I have integrated MathJax into my application to render MathML. The code snippet below is used to ensure that the MathML is typeset properly: $rootScope.$watch(function() { MathJax.Hub.Queue(["Typeset", MathJax.Hub]); return true; }); However, I ...

Ways to extract information from a website using the data within a span element

I am struggling to extract the R1200 value from the "one Way drop off surcharge" section. Despite trying different methods, I have not been successful in retrieving this information. My goal is to copy the 1200 value and paste it into an Excel cell. I am f ...

Access a PHP file using XMLHttpRequest to run additional JavaScript code

My main page, referred to as Main.php, contains a button that triggers the display of results from Results.php within a div (divResults) on Main.php. The HTML content "These Are The Results" returned by Results.php is successfully displayed in the divResu ...