Effortlessly apply CSS styles to multiple cached jQuery variables without redundancy

Hey there, I've got this piece of code written in Javascript for a classic ASP page. Since there are no CSS classes defined, everything is handled within the Javascript itself.

var $a= $('#a'), $v= $('#v'), $s= $('#s'), $n= $('#n');

I'm wondering how I can apply the following CSS style .css({ 'border-width': '2px' }) to all these variables without repeating the same styling multiple times.

I attempted to do this 

$([$a, $v, $s]).css({ 'border-width': '2px' });
but unfortunately, it didn't work as expected. Can anyone provide some assistance on this matter? Thank you!

javascriptjquerycss

Answer №1

Instead of relying on variables, opt to work with the elements directly. When targeting multiple elements, always remember to separate them by using a comma.

$('#a, #v, #s, #n').css({ 'border-width': '2px' });

Answer №2

Using pure css:

#a, #v, #s, #n { border-width: 2px; }

Implemented with javascript:

$('#a, #v, #s, #n').css({ 'border-width': '2px' });

Answer №3

Save your cache value and implement it for multiple purposes as shown below

const cachedValues = $('.element1, .element2, .element3');
cachedValues.css({ 'background-color': '#f0f0f0' });

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

Creating an event on the containing element

Here is my HTML tag: <ul> <li> <form>...</form> <div> <div class="A"></div> <div class="B"><img class="wantToShow"></div> </div> ...

javascriptjqueryhtml

Is it possible to execute a JavaScript function after a successful callback using Ajax.actionlink?

I'm currently using MVC5 to load images from a list using Unobtrusive Ajax.ActionLink(). Here is the code snippet I am working with: <ul class="list-group list-unstyled lists"> @foreach (var item in Model) { <li> @Ajax.ActionLink(@item.Na ...

jqueryasp.net-mvc-5unobtrusive-ajax

What steps should I take to resolve the problem with accessing Mongodb?

Whenever I attempt to initialize MongoDb by typing 'mongo', I keep getting the error message "not recognized as an internal or external command". Despite setting the environment variables as recommended by many, as shown in this screenshot, I am ...

javascriptnode.jsmongodbcommand-prompt

retrieving photos from the server and showcasing them

I'm facing a challenge and would appreciate your guidance. I have a collection of images stored on a server. In my client-side code using jQuery, I need to retrieve these images (not just their links) from the server via AJAX and PHP, then display the ...

phpjqueryajaximage

Disable the default hover effect of the ASP.NET menu

How can I disable the default hover effect on my asp.net menu and instead display child items when the parent item is clicked? I am currently using the pre-built asp.net menu feature and populating menu items from a sitemap data source. <div class="sp ...

jqueryasp.netcss

Sharing information with Django through Ajax and jQuery

I'm facing an issue with posting html5 geolocation data to the django admin backend. I've managed to display the latitude and longitude on the html page but can't seem to successfully submit the data to django. I suspect there might be a pro ...

javascriptjqueryajaxdjangogeolocation

What steps should I take to ensure my three.js project is compatible with iPhone testing?

I recently developed a new AR project that allows users to interact with AR content through their phone camera on a website. However, I am facing an issue where I cannot easily test my website on an iPhone whenever I make changes to the code. Currently, ...

javascripthtmlthree.js

Feathers.js - Incorporating Static Content

Recently, I've been exploring the capabilities of feathers.js for a new project and have been quite impressed with its potential. Intrigued by what it offers, I decided to embark on creating a basic content management system as a way to further my lea ...

javascriptnode.jsexpressfeathersjs

Why isn't the tooltip function functioning properly in Bootstrap 5 beta1 when using an SVG image?

Currently, I am utilizing Bootstrap 5 beta1. However, I have encountered an issue. When I use a tooltip with a button, it works fine. But if I use a tooltip with an icon (svg, feather icon), it doesn't work. In other instances, when I use a tooltip ...

javascriptjquerytwitter-bootstrapsvgbootstrap-5

Utilize text wrapping to ensure a fixed maximum height for content display

I am in need of a div that contains text spanning multiple lines, with both a fixed width and a maximum height. Currently, I have applied the CSS property overflow: hidden;. However, my issue arises when the last line of text exceeds the maximum height of ...

javascripthtmlcssword-wrap

AngularJS Assessing an Attribute directive following an Element directive

Currently, I am utilizing an angular plugin that can be found at the following link: https://github.com/angular-slider/angularjs-slider The objective is to customize the "legends" produced by the directive. In order to achieve this customization, the dire ...

javascriptangularjsangularjs-directive

Vue.js component communication issue causing rendering problems

When it comes to the Parent component, I have this snippet of code: <todo-item v-for="(todo, index) in todos" :key="todo.id" :todo="todo" :index="index"> </todo-item> This piece simply loops through the todos array, retrieves each todo obj ...

javascripthtmlvue.jsvuejs2vue-component

Error: Cannot locate module: Vue not found, incorrect path specified

I am facing an issue with my webpack configuration. I have placed my webpack.config.js and node_modules in a subfolder. When attempting to run the command npm run build, I encounter the following error: ERROR in ../public/Vue/Components/Rating.vue Module n ...

javascriptwebpackvue.js

The latest grid system in Bootstrap 5 is designed to streamline

I'm attempting to use Bootstrap 5 to create a grid system similar to the image shown below View Image I've been struggling to replicate the grid section shown in the attached image using Bootstrap 5. <div class="container-fluid"> ...

htmlcssbootstrap-5

Creating HTML content in a new window with Vue.js - a step by step guide

Recently, I encountered a problem with jsPDF regarding Unicode support in table generation. To work around this issue, I decided to utilize the browser's print feature instead. I achieved this by creating a new HTML document with the table and display ...

javascriptvue.jssecurityvuejs2

Issue encountered when attempting to modify the directive when the drop-down list is changed in AngularJS

Experiencing issues updating the directive when the drop down list is changed using AngularJS. Below is my application code: HTML Code <div ng-app="myApp" ng-controller="MyCtrl"> <select ng-model="opt" ng-options="font.title for font in font ...

javascriptangularjsangularjs-directive

Maximizing Server Performance with Query Data Caching

I am currently developing an Express app that involves transferring data from views to a database. However, the majority of the data needs to be linked to other data within different tables in the database. For instance, there is a "choose student name" d ...

javascriptnode.jsdatabaseexpressmemcached

Arranging Vue numbers

Vue data contains: data: { offices: requestData, selectedFloors: [ "3", "4", "5", "10", "11", "12", ...

javascriptvue.jssorting

Encountering issues with Jquery while retrieving data from a .json URL

While attempting to retrieve data using a small script that usually works with URLs producing JSON data, I encountered a syntax error when trying it with a URL ending in .json. //error Uncaught SyntaxError: Unexpected token : http://frontier.ffxiv.com/wo ...

javascriptjqueryjsonajax

Issues with form rendering in a Vue.js component

I have recently started learning vue.js and I'm trying to create a basic form using the materializecss framework within a component. The form requires this jQuery snippet to function: $(document).ready(function() { M.updateTextFields(); }); ...

javascriptjqueryvue.jsmaterialize