Adding and removing attributes with Jquery upon clicking a button

How can I make my listed items add an ID when clicked, or what am I doing incorrectly?

$('.ex-menuLi #tt').attr('id', 'test');
$('.ex-menuLi').on('click', function(){
    $(this).attr('id', 'test').siblings().removeAttr('id', 'test');
});
<nav id="extraMenu">
    <!--<ul id="ex-menuUl"> -->
    <li class="ex-menuLi" id="ex-menuLiId"><a href="#" class="test1" id="tt">Test</a></li>
    <li class="ex-menuLi" id="ex-menuLiId"><a href="#" class="test1">Test2</a></li>
    <li class="ex-menuLi" id="ex-menuLiId"><a href="#" class="test1">Test3</a></li>
<!--</ul>-->
</nav> 
#test{
    text-decoration:underline;
}

Answer №1

//An example of how to assign a unique identifier

$('.ex-menuLi').each(function(counter){
   $(this).attr('id', counter)
 });

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

What could be causing Express to display a different page than the one specified in res.render?

Upon trying to view the compare.ejs page, I encountered an unexpected issue where a different page was being rendered instead. What could be causing this discrepancy? Here is my app.js code: var compare = require('./routes/compare')(nav); app.u ...

Tips for adjusting the width of table columns when dealing with browser fields

When working with a table field, I am allowing input as a file. <table> <tr> <th> <input type="file" name="icon" id="icon" /> </th> </tr> </table> The file input field is recommended to have a width of 242-246px ...

Tips on enlarging a webpage without showing the scroll bar on the main component

My goal is to create a webpage that resembles a window application. However, I've encountered an issue where zooming in on the page results in a scroll bar appearing on the main page. The parameters for the main page (the parent) are set as follows: w ...

Is it appropriate for HTML5 Web Workers to utilize CORS for cross-origin requests?

As I was creating a hosted API that relies on web workers, I encountered an intriguing issue. I am looking for feedback from the community to help me with this. Even though my server has the necessary CORS headers in place to serve the worker JS files and ...

NodeJS JSONStream causing memory exhaustion issue

I've encountered an issue while trying to stream a large JSON file (94mb in size) from an HTTP request to a local file using the JSONStream library in NodeJS. Despite setting a memory flag of 256mb with node --max-old-space-size=256 .\main.js, th ...

Terminating a function during execution in JavaScript/TypeScript

Currently, I am in the process of developing a VSCODE extension using TypeScript. Within this extension, there is a particularly large function that is frequently called, but only the final call holds significance. As a solution, I am attempting to elimina ...

Mastering Protractor's end-to-end control flow and managing time outs

When testing an angular app using protractor, I encountered a strange issue recently. Every now and then, or since a recent update, protractor seems to stall or slow down significantly. After investigating the problem, I discovered that a simple someEleme ...

Concealing specific outcome by implementing jQuery and AJAX with a database

I have an HTML list that appears as follows: <ul> <li>something</li> <li>something1</li> <li>something2</li> <ul> <div class="randomwrapper"> <img src="<?php echo $databaseresult[$i];?& ...

Turn off hover opacity effect for a specific image

Currently, I've implemented a hover opacity effect on my images using the following CSS: img { opacity: 1.0; filter: alpha(opacity=1.0); } img:hover { opacity: 0.6; filter: alpha(opacity=0.6); } However, I now have a specific image for whi ...

Mobile-formatted inline Bootstrap

Using bootstrap and seeking to have elm1, elm2, and elm3 displayed inline on mobile devices? Take a look at the code snippet below: <div class="container-fluid"> <div class="form-group"> <label class="control-label col-sm ...

What is the importance of setting up an HTTP server?

Can anyone explain why, in nodeJs programming with javascript, it is necessary to establish a server using the http module, even though one could simply utilize the fs module for reading, writing, and updating data stored in a json file? ...

Searching for the precise draggable grid line position in rulerguides.js - tips and tricks!

Currently, I am utilizing rulerguides.js in my project. I have customized it for a specific div to display rulers and grid lines. You can refer to this FIDDLE. The rulers are functioning properly, but the draggable grid lines are being calculated based on ...

Storing data locally in Angular applications within the client-side environment

As I delve into Angular and TypeScript, I've encountered a perplexing issue. Let's say I have two classes - Employee and Department. On the server-side, I've established a Many-To-One relationship between these entities using Sequelize: db. ...

Using Angular Material for creating tabs with identical content

I am using material with angularjs and have encountered an issue with my two md-tabs. Both tabs have a similar DOM structure, but contain some unique content. Instead of duplicating the common DOM twice, I am looking for an alternative solution. Is it poss ...

How to handle multiple formData input in NestJS controller

How can I create a controller in Nest.js that accepts two form-data inputs? Here is my Angular service code: public importSchema(file: File, importConfig: PreviewImportConfig): Observable<HttpEvent<SchemaParseResponse>> { const formData = ...

PHP is struggling to interpret the JSON object

I am struggling to pass the username and password to a PHP script and verify them in the database. To achieve this, I utilize the following client-side script to create a JSON object and send it to the PHP file. var myobj = {}; myobj["usrname"]= $( "#cust ...

Creating a Full Height Background Image with a Responsive Width Using Jquery

I am facing an issue with my background image dimensions of 1400 in height and 1000 in width. When using any full-screen background jQuery plugin or code, the image crops from either the top or bottom to fit the entire screen. However, I am looking for a s ...

Issue with EaselJS: mouse events are no longer functional

I'm currently working on adding a touch animation using the EaselJs library. Interestingly, when I load an image from a local folder, all mouse events work as expected, such as onPress. However, things take a different turn when I opt to use an imag ...

Is there a way to grab code from a different HTML page using JavaScript and jQuery when the user clicks on something?

After testing various codes for the intended purpose mentioned in the title, I have observed a peculiar behavior. The code from settings.html appears briefly and then disappears rapidly. Javascript: function load() { $("#paste").load("settings.html") ...

Customize the border of the Tab indicator within Material UI

I created a custom NavBar with a unique tab indicator implementation: indicator: { background: 'linear-gradient(45deg, #FE6B8B 30%, #FF8E53 90%)', }, <Tabs classes={{indicator: classes.indicator}} onChange={handleClickTab} value={value}> ...