Question

I have a simple function that sets the width of a bar based on an argument.

And I call the function on .each with jQuery.

The console logs the statement correctly, showing me it seems to work. However, the style seems to be overridden by the last value found.

Here is the function:

function barGraph(innerWidth, barWidth) {
    innerWidth = parseInt(innerWidth) * .01 || .50;
    barWidth = parseInt(barWidth) || 267;

   // find percentage of total width
   var innerWidth = Math.floor(innerWidth * barWidth);

   var $innerBar = $('.slider-box div');

   $innerBar.css('width', innerWidth + 'px');

   console.log("Width should be: " + innerWidth + 'px');
}

then i call the function on each with jQuery:

$(document).ready(function() {
   var $innerBar = $('.slider-box div');

   $innerBar.each(function(index) {
       var newWidth = $(this).attr("data-bar-width");
       barGraph(newWidth, 267);
   });
});

the console log shows 10 times, with all appropriate widths. However, the style for all is the same as the last width.

Can someone help explain how I get the function to set the width of the currently selected div?

Thanks so much in advance,

Adam.

Answer 1

Let’s break it down

$(document).ready(function() {
   var $innerBar = $('.slider-box div');

   // going to call the barGraph function on each matching element
   // so far, so good
   $innerBar.each(function(index) {
       var newWidth = $(this).attr("data-bar-width");
       barGraph(newWidth, 267);
   });
});

Then in barGraph

function barGraph(innerWidth, barWidth) {
    innerWidth = parseInt(innerWidth) * .01 || .50;
    barWidth = parseInt(barWidth) || 267;

   // find percentage of total width
   var innerWidth = Math.floor(innerWidth * barWidth);

   // getting all the matching elements (again)
   var $innerBar = $('.slider-box div');

   // setting the width of each matched element to 
   // the innerwidth calculated in this barGraph call.
   $innerBar.css('width', innerWidth + 'px');

   console.log("Width should be: " + innerWidth + 'px');
}

So, the barGraph function is run as many times as there are matched elements in $('.slider-box div'), but each run sets the width of all matched elements. In effect, the last run will set the width of all matched elements to whatever the innerWidth is calculated to be on the last run. Is that what you want to happen?

What is more likely is perhaps something like this

$(function() {
   var $innerBar = $('.slider-box div');

   // going to call the barGraph function on each matching element
   // so far, so good
   $innerBar.each(function(index) {
       var bar = $(this),
           newWidth = bar.attr("data-bar-width");
       barGraph(bar, newWidth, 267);
   });

   function barGraph(bar, innerWidth, barWidth) {
       innerWidth = parseInt(innerWidth, 10) * .01 || .50;
       barWidth = parseInt(barWidth, 10) || 267;

       innerWidth = Math.floor(innerWidth * barWidth);

       bar.css('width', innerWidth + 'px');

       console.log("Width should be: " + innerWidth + 'px');
   }

});

If the barGraph function is not used outside of the each call, then I might be inclined to move the function body inside of the anonymous function passed to each or modify barGraph function to be the function passed to each i.e.

$(function() {

   $('.slider-box div').each(barGraph);

   function barGraph(index, element) {
       var bar = $(this),
           newWidth = bar.attr("data-bar-width");

       newWidth = parseInt(newWidth , 10) * .01 || .50;
       newWidth = Math.floor(innerWidth * 267);

       bar.css('width', newWidth + 'px');

       console.log("Width should be: " + newWidth + 'px');
   }

});