The animation feature does not work on all elements individually

I am encountering an issue with my progress bar where the data-percent attribute is not being applied correctly. Each pro-bar has a different data-percent value, but in the browser, the first pro-bar's data-percent value is being applied to all of them.

Below is the code I'm using:

$('.pro-bar').each(function( i, elem ){
    var percent = $(elem).attr('data-percent'),
        barpercent = Math.round(percent*5.56),
        $elem = $(this);

        console.log(percent);

    $elem.animate({'width':barpercent}, 2000, 'easeInOutExpo');
});

Answer №1

Your issue lies in how you are referencing your pro-bar within the loop. Utilize "this" to point to the current element instead of a general class selector.

$('.pro-bar').each(function( i, elem ){
    var percent = $(this).attr('data-percent'),//adjust here
        barparcent = Math.round(percent*5.56),
        $elem = $(this);

        console.log(percent);

    $elem.animate({'width':barparcent}, 2000, 'easeInOutExpo');
});

To elaborate:

$(".pro-bar").attr("data-percent")
selects all elements with the class .pro-bar, and then .attr("data-percent") fetches the value of the first element (similar to other jQuery methods). As you iterate through each element, this action is repeated multiple times.

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

ajax event malfunction

My current issue involves an ajax event that is activated when I press the submit button to input data into a database. Originally, these elements were spread across separate files for testing purposes. Now that all the code has been consolidated, I have ...

Deactivate the form element when a user selects another button

I am facing an issue with two buttons that are linked to the same modal form. Here is the code snippet for the form: <form name="addUser" ng-submit="(addUser.$valid) ? add() : '';"> <div class="form-group has-feedback" ng-class="ad ...

breezejs: Non-scalar relationship properties cannot be modified (Many-to-many constraint)

Utilizing AngularJS for data-binding has been smooth sailing so far, except for one hiccup I encountered while using a multi-select control. Instead of simply adding or removing an element from the model, it seems to replace it with a new array. This led t ...

Is there a way to include a lockfile in a docker container as an optional step?

I am attempting to create a docker image that can optionally incorporate a yarn or npm lockfile during the build process. I want to include it explicitly, but also ensure that the build does not fail if the lockfile is missing. The goal is to respect dete ...

Efficiently incorporate a set of fields into a form and automatically produce JSON when submitted

The optimal approach for dynamically adding a set of fields and generating JSON based on key-value pairs upon form submission. <div class="container"> <div class="col-md-4"> <form method="POST" id="myform"> <div class="f ...

How can I disable a select element in Laravel 5?

Hey everyone! Currently using Laravel 5 and trying to style the "select" class as "selectpicker". I'm facing an issue where I want to disable or hide the selected option when clicked, as I'm creating a div with the option's content right b ...

Issue with Angular: RouterLinkActive fails to work properly with formControlName

I am currently working on a vertical navigation bar that allows the user to navigate to different components. However, I am facing an issue where when I click on a list item, it's supposed to be active but I have to click on it to navigate to the comp ...

Tips for accessing jQuery elements following declaration

Using jQuery, I have created a Tr element like this: var elemTr = $("<tr>", { }); var elemEmpName = $("<div>", { }).data('otherDtls', { recordId: 10 });; Next, I appended elemEmpName to elemTr like so: elemTr.append(jQue ...

Design: A stationary text box positioned on the left side alongside a selection of scrollable MDL cards on the right

I'm currently experiencing a challenge with adjusting the text on two specific pages. On one side, there is a box with text, while on the other are two MDL cards displaying dialogues. The trouble arises when I try to set a fixed position for the text ...

Is it possible to simultaneously update two entities using a single endpoint?

In order to update data in two different entities with a @OneToOne relationship between UserEntity and DetailsEntity, I need to create a function in my service that interacts with the database. Here are the entity definitions: UserEntity @Entity() export ...

Altering pointer during drag操作

Is it feasible to customize the cursor during a drag operation? I've been exploring ways to achieve this for some time now. My goal is to replace the default 'not-allowed' cursor that appears when dragging an object with a different cursor. ...

Bootstrap typehead not activating jQuery AJAX request

I am attempting to create a Twitter Bootstrap typehead using Ajax, but nothing seems to be happening. There are no errors and no output being generated. Here is the jQuery Ajax code I have implemented: function CallData() { $('input.typeahea ...

Modifying Bracket Shell Name leads to WebSocket Connection Failure

I have been working on developing an application using the Brackets shell. Specifically, I am in the process of creating a customized code editor for a project rather than starting from scratch by modifying Brackets. Up until now, I have managed to addres ...

When using the React Material Tree Table, I expect any new row added to automatically expand by default in the table tree structure

<MaterialTable title="title" columns={columns} data={data} icons={tableIcons} parentChildData={(row, rows) => rows.filter((item) => item.id === row.productId)} /> ...

Monitor File Tool for JetBrains IDE - CSS Optimization Setup - Streamline CSS Automatically

Utilizing the File Watcher tool in Jetbrains IDE (Webstorm and Rider) to automatically minify .css files and generate corresponding .min.css files for the entire project has been my goal. However, a challenge arises when it starts minifying files that alr ...

Ways to update the hidden field's value within a foreach loop when the change event occurs?

On my page, I have input fields and foreach conditions set up. <form action="process.php" name="employee" method="post"> <input type="text" name="name" class="onchangefield"> < ...

What could be causing this inconsistency where the jquery ajax request is successful with the GET method but fails with

$.ajax({ url: 'test.php', type: 'GET', dataType: 'json', data: "last_name=SMITH&first_name=JOHN&middle_name=J", contentType: "application/json; charset=utf-8", success: f ...

The table is overflowing its parent element by exceeding 100% width. How can this issue be resolved using only CSS?

My root div has a width of 100% and I need to ensure that all children do not overlap (overflow:hidden) or exceed the 100% width. While this works well with inner <div>s, using <table>s often causes the table to extend beyond the parent 100% d ...

Can you tell me the proper term for the element that allows CSS properties to be changed after a link has been clicked?

I have integrated a horizontal scrolling date selector on my website, and it is functioning well. However, I am facing an issue while trying to change the CSS properties of a clicked date link using jQuery. Despite successfully firing the click event, I am ...

Is there a way to locate classes containing underscores within them using Selenium?

Having trouble scraping a webpage with a class name containing an underscore, specifically this element: <span class="s-item__time-left">30m</span> == $0 I attempted to locate it by class name: time = driver.find_elements_class_name("s-item_ ...