Assigning the Style property to an element using a string that includes HTML tags

My HTML string is populated with elements such as button, li, span, and more.

I am looking to add specific styles to buttons based on their class name.

For example, if

button.btn {
   some styles
} 

and

button.btn-success {
    some other styles
}

Once the styles are applied, I need to append this modified HTML string to the body. How can I achieve this using jQuery? Your assistance would be greatly appreciated.

Thank you in advance.

Answer №1

Consider trying it this way:

$('button').each(function(){
    if($(this).hasClass("btn")){

    // apply the style here
    }

    if($(this).hasClass("btn-success")){

    // add your desired style here
    }
});

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

Tips for preventing empty searches within WordPress by implementing jquery techniques

Within my WordPress website, there is a search function that consists of two separate search boxes. The first one is a basic text input located in the searchform.php file, which has jQuery validation applied with the following code: function title_validat ...

Utilize Bootstrap to align two images in the same row and adjust their sizes accordingly

I am looking to display 2 images side by side on a single row, with the ability for them to resize accordingly when adjusting the page size without shifting to another row. Currently, as I decrease the page size, the second image (the black block in the d ...

Tips for Printing a div Element with Horizontal Scrollbars

My webpage has both vertical and horizontal scroll bars, but when I use window.print(), it only prints the visible content in the window. Is there a way to print the entire scrollable content within the window? ...

Managing Page Refresh using AngularJS Service and Views

In my single-page application (SPA), I have implemented two views: a list view and a detail view. To pass data between these two controllers, I am utilizing a service called StateService. The issue arises when the user refreshes the browser page, causing ...

How can I bind the ID property of a child component from a parent component in Angular 2 using @Input?

I have a unique requirement in my parent component where I need to generate a child component with a distinct ID, and then pass this ID into the child component. The purpose of passing the unique ID is for the child component to use it within its template. ...

What is the process of calculating the difference between two time values in PHP?

I have searched everywhere online and tried multiple methods over the past couple of days, but still can't seem to achieve the desired result. My goal is to subtract two different times, for example 22:00:00 - 00:30:00 = 21:30:00 $hourToEatLastMeal = ...

What is the best way to trigger a re-render of a Vue component after a change in Vuex

I'm interested in developing a custom component to modify the basemap of a leaflet map without relying on L.control.layers. To achieve this, I created a sidebar component that offers options to switch between different basemaps. In my implementation, ...

Place the div at the bottom of the container with a flexible height determined by the content-wrapper

Can anyone help with a css problem I'm having? I am trying to create two columns, each containing dynamic content and images at the bottom of the column. Here is an example image for reference: https://i.sstatic.net/pvOef.png I want these image bloc ...

jQuery is used to create an object that contains a list of dictionaries with key-value pairs

In my C# code behind, I have an object defined as: public List<Dictionary<string, string>> attributesList { get; set; } Now, I am looking to populate this object using JQuery. In my JQuery file, I am r ...

Adding additional elements to a div in a horizontal orientation

I am currently working on a project where I need to display bars and restaurants based on specific filter criteria. I have a container div called .resultsContainer where all the results will be displayed. While I can easily append more divs (.barContainer) ...

Minimal Space Separating Footer Division and Body Element

While there are numerous discussions online about fixing footer alignment issues, I've encountered a unique problem that needs addressing. The issue at hand is a 29px gap between the bottom of the footer and the <body> tag on my webpage, which ...

Change the Vue3 PrimeVue theme or CSS file with a simple click or upon page load

One way to incorporate themes is by importing them in the main.js file at the root of the app: import 'primevue/resources/themes/arya-orange/theme.css'; However, I am exploring ways to dynamically switch CSS files based on the user's system ...

Programmatically remove a component from the DOM in Vue 3

I am working on a project similar to a spreadsheet with draggable cells, where I can move events, which are components, around. One of the challenges I'm facing is removing a component after adding it dynamically. I have tried using this code snippet ...

Managing multiple Angular calls when additional submit buttons are present

I am working on a form that includes a drop-down menu, check box, and four buttons. Whenever any action is taken (such as checking/unchecking the box, selecting an option from the drop-down, or clicking a button), it should trigger a service call to update ...

Working with Vue.js: Utilizing computed properties to iterate through a JSON data structure and generate a new

This is a computed property in Vue.js: shopCart() { var scart = [], group, node; scart.push({ payMethod: 0, transactionReference: "", RoomNumber: 0, addressId: 0, deliveryMinutes ...

Printing without sufficient paper will result in an incomplete printout

https://i.stack.imgur.com/jNlRr.jpg I am facing an issue with printing the last column "Potensi". The text in this column is not fully printed. How can I resolve this problem? I am using PHP. Thank you ...

Exploring ways to transfer a function variable between files in React

Currently, I am working on a quiz application and have the final score stored in a function in app.js. My goal is to generate a bar graph visualization of the user's results (e.g. 6 right, 4 wrong) based on this score. To achieve this, I created anoth ...

Turn off the footer button on materialize.css modal

I'm struggling to disable one of the modal footer buttons in materialize.css. I tried using disabled="disabled", but it doesn't seem to be working. You can see my example on jsfiddle. <a class="waves-effect waves-light btn modal-trigger" href ...

Looking for a solution to organize the dynamically generated list items in an HTML page

I am currently working on a movie listing website where all the movies are displayed in sequence based on their #TITLE#. The webpage is generated automatically by the software using a template file. Here is the section of code in the template file that sho ...

Interactive Javascript Dropdown Selection

I'm currently developing a registration page for a website and I've added a drop-down box that explains to users why we need their birthday. However, I seem to be having issues with my code. Take a look at the script below: <script language=& ...