Is it possible to use jquery to specifically target classes?

I am trying to achieve the following:

$('.class.img').css('cellpadding', variable);

However, this code does not seem to be working as expected. Despite searching online, I have not been able to find a solution. Any assistance on how to apply this code to an image within the specified class would be greatly appreciated.

Answer ā„–1

When using CSS, the styling properties are applied inline with style="...", rather than modifying the .class itself.

$('.class').css doesn't have any effect.

$('.class').css('color','red') sets a color style.

$('.class').css('color') reads the color style.

To target img elements within an element with class "cellBox":

var borderx = "1px solid red";
$('.cellbox img').css('border', borderx);

(You can set other styles like padding in the same way.)

See a working example at http://jsfiddle.net/SBjfp/2/

(Note that jQuery's documentation states that shorthand properties like padding or border may not be fully supported; this mainly applies to retrieving properties, while setting them [like above] typically works due to browser implementations.)

Answer ā„–2

Using jQuery selector engine is effective when working with class selectors.

The main issue evident here (although there could be other issues, depending on the document structure or timing of the statement execution) is that the css function needs to be called in order to work properly (for example, css('foo')).

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

Comparing Jquery's smoothscroll feature with dynamic height implementation

Recently I launched my own website and incorporated a smoothscroll script. While everything seems to be working smoothly, I encountered an issue when trying to adjust the height of the header upon clicking on a menu item. My dilemma is as follows: It appe ...

The script file (.js) isn't showing up on the PHP or HTML webpage

Experiencing a peculiar issue and seeking advice on alternative solutions due to my limited experience in this matter. The Issue: I currently have the following script running smoothly: <script type="text/javascript" id="myscript" src="http://piclau ...

Unable to utilize the full column space provided by bootstrap

I need assistance in making three buttons span the entire width of a column. The grid consists of 3 sections for the buttons and 9 sections for other components. Here's a visual reference. Essentially, the buttons should take up the space highlighte ...

Populate an AngularJS select dropdown with JSON data and automatically pre-select the specified value

I am currently dealing with 2 entities: project and project_types. Each project can have one or multiple project_types associated with it. Using ajax (ng-init), I am retrieving the project data (including its related project_types) and all available proje ...

Tips for adjusting the size of a drawing on an HTML 5 canvas within a personalized Polymer component

In my custom Polymer element, I am looking to dynamically resize an html5 canvas when the window resize event occurs. Despite trying to utilize the window.onresize event, I encountered difficulties with accessing canvas functions. One of the functionalit ...

Encountered issue with Ajax post request without any additional details provided

I could really use some assistance with this issue. It's strange, as Chrome doesn't seem to have the same problem - only Firefox does. Whenever I submit the form, Ajax creates tasks without any issues. My MySQL queries are running smoothly and I& ...

jQuery parent() Function Explained

checkout this code snippet - https://jsfiddle.net/johndoe1994/xtu09zz9/ Let me explain the functionality of the code The code contains two containers: .first and .second. The .first container has two default divs with a class of .item. The .second contai ...

Rotate CSS elements dynamically using jQuery

I'm trying to figure out how to change the rotation value of an image element in my code. Currently, the rotation is set to 315 degrees, but I want to change it to 0 when a click event occurs. Can anyone help me with this? ...

Using bootstrap's center-block class, you can easily center

I'm attempting to center the content of a form. <div class="login-container"> <div class="center-block"> <form action="/joinChart" method="get"> <input name="username" id="username" type="text"><br><br> ...

Deactivating a Vue custom filter when hovering over it

I'm trying to figure out how to disable a truncate filter when hovering over an element using VueJS 2. Here's the part of my template that includes the filter: <div class="eng" @mouseover="showAll">{{ word.english | truncate }}</div> ...

Ways to extract input values from a specific row in a textbox as users input data

On a button click, I am dynamically adding data to an HTML table using the loadbooks function. When the user clicks on the button, the table is populated with data. <button id="button" onclick="loadbooks()"></button> function loadbooks() { ... ...

Performing HTTP requests within a forEach loop in Node.js

I have a collection of spreadsheets containing data that needs to be uploaded through an API. Once the data is extracted from the spreadsheet, I create individual objects and store them in an array. My initial approach involved iterating over this array, ...

The submit function in JQuery may not work as expected when attempting to submit a form in Internet

I'm dealing with a form that submits values to JQuery code, triggering an email with the form data. The issue is that it works flawlessly on Firefox but fails on IE6 and IE7. Any idea why this might be happening? Your insights would be greatly appreci ...

Having trouble getting my Win and Lose Divs to display in my IF statement within the Card Game

Currently, I am developing a card game where players are presented with a card generated by the computer. The player has to decide whether the next card will be higher, lower, or equal to the current one by clicking corresponding buttons. if ((playerChoic ...

Ensuring Form Submission is Successful: A Guide to JQuery/Ajax Form Validation and the Importance of Validating Forms and Ajax Operations

Iā€™m currently facing an issue with the form validator I'm using and need help resolving it. The form validator in question can be found at http://www.position-absolute.com/articles/jquery-form-validator-because-form-validation-is-a-mess/. My problem ...

Initiating a conversation from deep within a conversation using JQuery Mobile

I've been attempting to open a Dialog from within another Dialog, but so far no success. Take a look at the HTML code below: <a href="#popupDialog" data-rel="popup" data-position-to="window" data-role="button" data-inline="true" data-transition=" ...

Guide on implementing ES6 script's template literals

I've been tackling a template literal question on hackerrank. It's working smoothly on my local IDE, but encountering an error on the Hackerrank IDE. Here's the code to add two numbers and print the result using a template literal: const sum ...

Sending an array of JSON objects using jQuery is a simple and straightforward process. By

I'm currently facing a challenge while working on my web page - I am struggling to send an Array of JSON objects to my PHP backend script. Below is the JavaScript code I have been using (with jQuery): var toSend = new Array(); ...

``A problem with the background image of the left panel in Framework 7

After setting a background image for the side panel and blurring it using CSS, I encountered an issue where the text and icons within the side panel also became blurred. Despite attempting to isolate the background image in a separate class, the problem ...

Determine the presence of an image by using a wildcard in the URL

I need to show an image, and if it doesn't exist I want to display a default image. The challenge is that the image can come with any extension. Can someone suggest how I can modify the $.get() function in the code snippet below to make it search for ...