Apply a common class to all elements sharing the same href attribute

Can someone help me figure out how to add a class to all elements that have the same href as a clicked anchor tag?

I understand how to add a class to one element, but I'm unsure about adding a class to multiple elements with the same href.

$('.shop-item').on('click', function(e){
  var hrefClicked = $(this).attr('href');
  var otherElem = $('a[href$='+hrefClicked+']').attr('href');
  alert(otherElem);
  //$(this).addClass('newClass');
});

UPDATE:

Here is an example of the HTML structure:

<ul class="shop-list">
    <li class="shop-item"><a href="#Ordering"></a></li>
    <li class="shop-item"><a href="#Delivery"></a></li>
    ....
</ul>

Answer №1

To add a new class to the selected elements, simply use the addClass method:

$('a[href='+hrefz+']').addClass('newClass');

It is important to note that when using href$=, it will target href attributes that end with the specified value in hrefz. For exact matches, you should use href= instead.

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 One to Many Table Joins with Knex.js

My current situation involves working with two tables: In the quotes table, we have columns such as first_name, email, estimate, and more. Then, there's the quote_notes table with columns like id, note, and quote_id. The relationship between these ...

The method selObj.fireEvent is undefined and cannot be executed

There is a function in a JavaScript file that retrieves a menu tree when users click on the parent item: function menusel(unid) { //if its in the array, deactivate it and take it out var index = inarray(unid,selectedarray); //first arrange ...

Is there a way in CSS to set a label's width equal to the width of its content?

I am facing an issue where I need the question mark div to be positioned right next to the top row of text in the label it is associated with. Can someone suggest some styles that can be applied to the label to adjust the width and spacing so that it match ...

Attempting to input all the data from the form to make updates within the database

Greetings for reviewing this. I've been grappling with a challenge for some time now; essentially, I'm working on a recruitment agency website for my school project. The feature I'm currently developing involves viewing all the candidates wh ...

How can I customize the border color in Bootstrap with a specific hex code?

Being new to the world of web design, I have a burning question that may have an easy solution that has evaded my notice. In my current project, I am attempting to create a div with a colored border using bootstrap. Specifically, I want to use a specific h ...

Searching for the search parameter in the Wordpress admin-ajax.php file. What could it

Just diving into the world of php and wordpress. Are there any search parameters I can include in admin-ajax.php? Here are the parameters in the ajax post; action: rblivep data[uuid]: uid_search_0 data[name]: grid_small_1 data[posts_per_page]: 8 data[pagin ...

Introducing a new div element completely disrupts the overall layout

Take a look at the code I have provided below. http://jsfiddle.net/xymgwonu/3/ Everything was working perfectly fine until I introduced a new div with the class name <div class="bubble"></div>. This caused some issues with the overall design. ...

Dropdown sidebar with collapsible sections

I am looking to create a unique navigation system for my website. I have a standard HTML list with menu items that will serve as anchor links on a long-scrolling page. My idea is to design it as a minimal vertical side navigation bar, where each item initi ...

How can I implement user authentication with ajax and php?

I've implemented an AJAX jQuery function for a more user-friendly login process, but it's still not functioning properly. Can someone point out what I might be doing wrong? Thank you. The code within form_log.php: <script type="text/java ...

problem encountered with data not being received by Java servlet

I am having difficulty sending canned json data to a servlet using jquery ajax on the Google App Engine. Despite catching the call in the debugger and inspecting the request, I consistently find that the parameters map is null... Any assistance would be g ...

"Unveiling the Benefits of Converting Body to JSON String and Object in Angular 7

Why is it necessary to convert event.body into a JSON string and then parse it back into an object? this.excelFileService.upload(this.currentFileUpload).subscribe(event => { if (event.type === HttpEventType.UploadProgress) { this.progress ...

Update Mapbox popups following filtering

I have successfully constructed a Mapbox map with a complex custom popup structure, complete with photos and formatting. The data is being fed from a .csv file using omnivore, and the popups are being created on ready. Additionally, I have implemented a se ...

Searching for substrings in NodeJS using Express

In this code snippet, I am using Express JS and AES256 encryption to encode and decode simple text strings with a predefined key. The Express JS web server is set up to display specific elements based on the URL content. For instance, if the URL was abc. ...

What is the best method to modify the accurate phone number within my script?

I need help with a text format script. link HTML CODE: <label for="primary_phone">Primary Phone Number<span class="star">*</span></label> <br> <input type="text" name="primary_phone" id="primary_phone" class="_phone requ ...

Codeigniter raises an error message stating, "No file selected for upload," in cases where data is transmitted via Ajax

Having trouble inserting form data using Ajax and Codeigniter - encountering a 'You did not select a file to upload' error specifically with file uploads. Need help passing input file data through jQuery ajax. Below is the jQuery code snippet: ...

Encountering a PDF loading error when integrating ReactPDF in a React project

Having trouble trying to display a PDF file using the PdfReact component. Every time I attempt to load the PDF, I encounter the following error: Warning: Ignoring invalid character "114" in hex strinpdf.worker.js:342 Warning: Ignoring invalid character " ...

I'm having trouble launching Clinic.js, any suggestions on what steps I should take next?

When starting up your application, use the following command: clinic doctor --on-port 'autocannon -m POST localhost:8000/users/register' -- node dist/main.js If you need help, check out the Clinic.js Doctor - v9.2.0 log. The clinic doctor tool ...

Jest identifies an open handle when working with an Express application

For quite some time now, I've been grappling with a particular issue. It all started when I was conducting basic integration tests using a MongoDB database. However, I've minimized the code to its simplest form. The only thing left running is a s ...

A confined space that is scrollable, yet keeps any overflow hidden without displaying a scroll bar

Is there a method for creating a overflowing div that conceals the overflow, does not display a scroll bar, but remains scrollable (via mouse wheel or touch input)? For example: <!DOCTYPE html> <div id="longtext" style="width:100px; height ...

Adonis.js Creating a RESTFUL API Solution

I recently embarked on a new project using the adonisjs framework. I had the option to utilize expressjs, but I was drawn to adonisjs due to its structured nature, especially reminiscent of Laravel. My current challenge revolves around building a RESTful ...