How to dynamically change the border-top color of an <a> tag in a menu using a jQuery loop

I am interested in adding a colorful border-top to my menu using jQuery. I know this can be achieved with HTML by including style="border-top-color: red;", but I want to explore the jQuery method.
Here is what I have attempted so far: 

var colors = ['purple', 'yellow', 'orange', 'black'];
for(int i=0; i<4; i++){
    $("li").html("<a style= 'border-top-color: colors[i]'>");

I also tried replacing $("li") with $("a") but it did not work as expected.

Does anyone have any suggestions or solutions for achieving this effect using jQuery? Thank you!

javascriptjquerycss

Answer №1

It seems like the solution you are looking for is as follows:

var colors = ['purple', 'yellow', 'orange', 'black'];
$("li a") //this selects all the anchors
  .each(function(index) { //loop through each anchor
    var current = $(this); //get the current anchor being processed
    current.css("border-top-color", colors[index]); //set the border top color based on the index of the color array
  });
ul li {
    display: inline;  
    text-decoration: none;
}

li a { 
    display: inline-block;
    border-top: 5px solid transparent;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
  <li><a href="#">Link 1</a></li>
  <li><a href="#">Link 2</a></li>
  <li><a href="#">Link 3</a></li>
  <li><a href="#">Link 4</a></li>
</ul>

Answer №2

ATTEMPT

let colors = ['purple', 'yellow', 'orange', 'black'];
for(let i=0; i<4; i++){
    $("li").append("<a style= 'border-top-color: "+colors[i]+"'>");
  1. .html can replace the contents within your li element The real mystery is what motivates such a decision?

Answer №3

It may be challenging to provide a precise solution without knowing the specific layout of your html code. However, you could potentially try executing the following:

$('a').css('border-top-color', 'red');

This code snippet could serve as a helpful starting point for achieving your desired outcome.

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

Adding CSS styling to a particular component within your Vue application using Vuetify JS

Imagine having a Test.vue file containing 2 v-text-field components. I'm looking to style only the first text field using CSS. Test.vue <template> <div class="test"> <v-text-field></v-text-field> <v-tex ...

javascriptvue.jsvuetify.js

What sets Java classes apart from JavaScript classes?

After working with C# and Java, I decided to dive into learning javascript/node.js. However, I am facing some challenges trying to understand what is wrong with this code. Here is the snippet from my main.js file: const MyClass = require("./MyClass"); le ...

javascriptjavanode.js

Performing file validation in Laravel after submitting a form using jQuery's submit() method

Whenever I attempt to validate an image file after submitting the form using jQuery $('#appImage').submit(); I always encounter a validation error stating The image field is required Below is the validation code I used for checking the file ...

jquerylaravelfile-uploadlaravel-4laravel-validation

Tips for adjusting the placement of enlarged images within colorbox

I recently discovered colorbox and decided to use it as my lightbox solution. However, I encountered a challenge with positioning the background (#cboxOverlay). I wanted to move it 120px to the left so that some content from the original page would still ...

jquerycsscolorbox

Tips for troubleshooting objects within an Angular template in an HTML file

When I'm creating a template, I embed some Angular code within my HTML elements: <button id="btnMainMenu" class="button button-icon fa fa-chevron-left header-icon" ng-if="(!CoursesVm.showcheckboxes || (CoursesVm.tabSelected == 'curren ...

javascripthtmlangularjsgoogle-chrome

What is the process of saving a model with @tensorflow/tfjs-node version 2?

I've been struggling with setting up the save handler to save my model. I've scoured through various platforms like stack overflow and GitHub, but haven't had any luck. Help! Any guidance would be greatly appreciated!!! :) Below is a snipp ...

javascriptnode.jsartificial-intelligencetensorflow2.0tfjs-node

Sending the id as a prop in react-router-dom

Is it possible to pass an ID in props to a React component using react-router-dom? Take a look at my app.js file below: <Switch location={this.props.location}> <Route exact path="/" component={Home} /> <Route path= ...

javascriptreactjsreact-router-dom

What's the best way to include php variables in this Javascript code?

I'm currently in the process of constructing a straightforward news page that utilizes ajax filters based on the user's selected category. The javascript code below establishes a connection with a php file and generates HTML using data from a mys ...

javascriptphpjquerymysqlajax

``Is there a faux pseudo element lurking within Firefox?"

I have a question regarding Firefox. I often notice some peculiar pseudo elements in the debugger tool, displayed as a rectangle with a dot inside: In this particular case, I cannot fathom why there would be a pseudo element in the middle of a list. Whe ...

htmlcssfirefoxpseudo-element

accessing information from webpage using hyperlink reference

This seems to be a rather straightforward issue, but unfortunately, I lack the necessary expertise to address it. Despite conducting thorough research, I have been unable to find a solution - mainly because I am uncertain about what specific terms or techn ...

javascriptmatlaburlread

Modify a class attribute within a function

I need to modify the this.bar property within my class when a click event occurs. The issue is that the context of this inside the click function is different from the this of the class. export class Chart { constructor() { this.bar; } showC ...

javascriptd3.js

Unable to access Form element in Firefox browser

I'm struggling with debugging unfamiliar problems. For instance, in my HTML there's a form: <form name="myForm" > <table> <tr> <td> <input type="radio" name="myType" value="val" onclick="someF ...

javascripthtmlformsfirefoxhtml-table

Unlimited scrolling feature on a pre-filled div container

Looking for a way to implement infinite scroll on a div with a large amount of data but struggling to find the right solution? I've tried various jQuery scripts like JScroll, MetaFizzy Infinite Scroll, and more that I found through Google search. Whi ...

javascriptjqueryhtmlpaginationinfinite-scroll

AngularJS $http get isn't functioning properly, but surprisingly $.ajax works perfectly

Recently delving into the world of AngularJS, I am facing a hurdle with $http functionality. In my factory setup below: app.factory('employeeFactory', function ($http) { var factory = {}; // Retrieving data from controller var emplo ...

javascriptjqueryajaxangularjsget

Difficulty in showcasing error on the website with JavaScript

I have recently developed a webpage that includes several input boxes and a submit button within a form as shown below: <form action="" method="post" name="password"> Upon clicking the submit button, a JavaScript function is triggered to validate i ...

javascripthtml

Using MongoDB Object as middleware in Express applications

I’m facing issues trying to access the "DB" database object that gets created when the MongoDB client module establishes a connection with my MongoDB database. Currently, I am encountering an error indicating that in data.js, 'db' is not defin ...

javascriptnode.jsmongodbexpress

What is the best way to vertically center text within a selection box? (This is not referring to a select box or a div box)

While assigning a line-height to text elements like div, span, or p and dragging them in the browser, an unsightly empty space appears within the selection box: https://i.sstatic.net/Ws08H.png I am seeking a way to elevate the actual text content within ...

htmlcsstextalignmenttextselection

The application of texture to a sphere in Next.js with Three.js seems to be malfunctioning

Hi there, I'm having some trouble getting a texture to apply correctly to a sphere within a Next.js component. I've attempted it with the code provided below, but all I see is a black ball rendering instead. I suspect it might have something to ...

javascriptnext.jsthree.js

What is the most effective way to ensure a user's email address is not already in my database before submitting a form?

Welcome to my first question post. I'm in the process of creating a test where users can sign in and retake it if they wish. However, I'm facing a challenge in checking whether the user's email already exists in my mariaDB database when they ...

javascriptmysqlnode.jsexpressmariadb

The popover seems to be failing to appear

I am struggling to get a popover to appear when clicking on an appended href element dynamically. Here are the code snippets I have tried: <div id="myPopoverContent"> ...stuff... </div> <div id="div3" style= "width:200px;height:200px;" ...

jqueryhtmltwitter-bootstrap-3popover