How to use an array element to update a CSS property in jQuery

Here is the current CSS code for the "firstTri" class:

.firstTri{
    width: 0; 
    height: 0; 
    border-top: 160px solid transparent;
    border-bottom: 160px solid transparent;

    border-left: 160px solid gray;
}

I want to change the color of this triangle to yellow, so I have added the following code:

$('.firstTri').css("border-right","160px solid yellow");

Now, what if I want to update the color using values from an array?

samples = [
        { 
        values : ["blue", "red", "green", "blue", "yellow"],
        },
        { 
        values : ["...etc"],
        }

];

I was thinking of achieving this with a code snippet like the following:

 $('.firstTri').css("border-right","160px solid samples[i].values[j]");

Where i and j would increment, with i incrementing after j reaches its limit.

For example, if we want to use the second index which is red, we would refer to it as:

samples[0].values[1] 

Answer №1

When inserting a string into the CSS value, ensure it does not include any variables. For example:

$('.firstTri').css("border-right","160px solid " + samples[i].values[j]);

This should resolve the issue.

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

When using json_decode with double quotes and commas, it may sometimes result in

Trying to decode a json string that includes words with commas and double quotes: {"wordsFont":"Times New Roman","nameList":["Overflow ,","Stack ""]} Having trouble decoding it using json_decode, attempted to fix the issue by escaping the quotes in the s ...

difficulty obtaining today's date

Currently, I am facing an issue with displaying the current date in an input field for the user: <input id="uploadformData" ng-model="upload.date" type="date" value="<?php echo date('Y-m-d'); ?>" /> The problem arises when the input ...

Tips for extracting images from Twitter API data

As I set up a page to retrieve tweets based on a specific topic, I encountered a challenge when trying to extract image URLs from the JSON data. Despite successfully hard-coding the functionality and converting the data into arrays, targeting the "media_ur ...

Receive JSON data in URL as an array in PHP

What I aim to accomplish is: I have a JSON object structured like below var foo = { format:"json", type:"test", id:"26443" }; and my goal is to convert it into a URL in the following format 'http://example.com/a:3:{s:6:"format";s:4:" ...

Tips for choosing the nearest table rows with CSS

When it comes to CSS, specifying a style for the immediate child rows of a table can be done like this: table > tr { background: blue; } The challenge arises when we have a <tbody> tag surrounding the <tr> tags. Is there a way to addre ...

Java Spring - The on-page styling is out of control

Currently, I am in the process of developing a taxi web application using Java Spring. After successfully creating the website with the help of a template, I encountered an issue when trying to integrate the login functionality. Strangely, the styling on ...

Striking a line through the hyperlink tag

I am attempting to create a crossed-out line above the content of an a tag for decorative purposes. The line should stretch across the entire width without intersecting with the actual text within the tag. This is my desired outcome: https://i.sstatic.ne ...

Node.JS AJAX request with no data payload

Encountering an issue where no data is being received on the server side from an AJAX request because the req.body is empty (console logs it as {}). script.js: $("#button").click(function(){ var number = $("#number").val(); $.ajax({ ...

Animate play in reverse with JavaScript upon mouse exit

I'm currently using a code that works really well, but there's one thing I'd like to improve. When the mouse leaves, the animation stops abruptly which doesn't provide a great user experience. I have a few ideas: How can I make the &a ...

JQuery triggers multiple function calls when the window is resized

My current project involves the following tasks: - When the window's width is less than 700px and a user clicks on the gray bar at the bottom, a red menu should slide up and remain visible. - If the window's width exceeds 700px, clicking on the ...

Developing a Dynamic Table Featuring Information Pulled from a phpmysql Database

I am exploring ways to make the table below, which displays data from a MySQL database, responsive so that it can adjust to smaller devices without compromising the image quality. Currently, I am delving into Bootstrap to understand its capabilities bett ...

Applying CSS styling to PHP documents

I am a beginner, so please go easy on me. I am looking to style variables like $product_name, $author, and $details. I was thinking of styling the echos, but in this scenario, the only echo is: <?php // Establish connection with the MySQL database ...

Ways to obtain the height of a UL element while the display property is configured to flex

While I was blockwise segregating elements of a webpage and drawing borders around those blocks, I encountered an issue where the height turned out to be 0 when the display was set to flex. How can I retrieve the height in such scenarios? I experimented wi ...

Troubleshooting Z-Index problem with Material UI Drawer component on iOS

I'm currently working on a project that involves the use of the Material UI Drawer component. However, I've encountered a specific issue when using an iPad, which presents two main problems: - The overlay does not appear above the navigation bar ...

Utilizing Google Maps autosuggest with JQuery - Trigger load upon selection

Currently, the Google map code operates in the following manner: Upon entering text into the input box, a list of suggestions loads. When you click on one of these options, it places it into the input box. However, you then still need to click "find" to d ...

The custom jQuery validator that triggers a PHP function is malfunctioning

My custom validator, which utilizes a jQuery plugin, is designed to call a PHP page on the server for input validation against a database. While I am not an expert in JavaScript or AJAX programming, this solution was the best I could come up with. jQuery. ...

Angular shows nested values without considering dynamic keys

I need assistance with displaying user data retrieved from Firebase database. The JSON response I receive from Firebase starts with a dynamic value like "SivqCsErHQZNvGMe7p6r5nGknFy2". How can I skip this dynamic value and only show key/value pairs below? ...

The Powerful Combination of Heroku's PostgreSQL and JSON Data Types

I have a unique app that combines rails as an API and ember as a front end (leveraging the ember-rails gem). While everything runs smoothly on my local machine in both production and development, I encounter an error every time I execute heroku run rake d ...

Error encountered in the onPostExecute method due to a type mismatch at line 111 in JSON.java, along with a JSONException stating that the input has ended at character 0

Days have passed, and I am still searching for an answer. As a beginner in android development, I am struggling with the error messages org.json.JSONException: End of input at character 0 and org.json.JSON.typeMismatch(JSON.java:111) appearing in my onPost ...

`comparison of displaying websites within the same browser and version`

I recently added a website to my IIS. When I browse the address using "http://localhost:8080," everything in my layout looks fine. However, when I replace "localhost" with my computer's IP address (192.168.1.30) like this: http://192.168.1.30:8080, my ...