How can I have two of these on one page with different variables? (JQuery)

Question

I need to have 2 of these one page but each with different percentages. When I try re-writing the JS or even use different class/ID names it still always pulls from the first SPAN.

http://jsfiddle.net/K62Ra/

<div class="container">
<div class="bw"></div>
<div class="show"></div>
<div id="bar" data-total="100">
    <div class="text">Currently at <br/><span>70</span><br><i>Click To Give</div>
</div>

JS and CSS in the Fiddle.

Much Thanks.

Answer 1

This one will work smoothly:

http://jsfiddle.net/K62Ra/7/

$('.bar').each(function() {
    var percentStart = 0;
    var total = $(this).data('total');
    var percent = parseInt($(this).find('span').html());

    $(this).find('> div').addClass("load");

    var that = this;
    var timer = setInterval(function() {
        $(that).siblings('.show').css('height', percentStart/total*100+'%');
        $(that).css('height', percentStart/total*100+'%');
        $(that).find('span').html('%'+percentStart);
        if(percentStart<percent) { percentStart=percentStart+1; return; }
        clearInterval(timer);
    }, 35);
});

The interval has to be terminated as well, or it will run infinitely (though not doing anything).

Answer 2

I've changed your id="bar" into a class. Then I'm running a each loop for the .bar classes. here is the fiddle: http://jsfiddle.net/K62Ra/3/

here is the code:

$('.bar').each(function (index, element) {
  percent = $(this).find('span').html();

  total = $(this).attr('data-total');
  percentStart = 0;

  setInterval(function () {
    $('.show').css('height', percentStart / total * 100 + '%');
    $(this).css('height', percentStart / total * 100 + '%');
    $(this).find('span').html('%' + percentStart);
    if (percentStart < percent) {
        percentStart = percentStart + 1;
    }
  }, 35);


});
$(".bar div").addClass("load");

Answer 3

Like some of the comments have stated, having duplicate ids is bad design and can cause some weird errors.

You can find a solution to your problem by changing a number of things. One, instead of referring to divs in you selectors by id'#', you can infer them by class '.' like

$('.bar')

The next step would be to ensure exclusivity for each div with class 'container' by using a closure

$('.container').each(function(){
   var x
   var y
   .
   .
});

And finally, avoid 'selecting' elements in the selector directly, but use $(this) and .find() to ensure you are within the current div with class 'container'.

http://jsfiddle.net/K62Ra/5/

$('.container').each(function(){
    var percent = $(this).find('div.bar div span').html();
    var total = $(this).find('div.bar').attr('data-total');
    var percentStart = 0;

    var that = $(this);

    setInterval(function() {
      that.find('.show').css('height',percentStart/total*100+'%');
      that.find('div.bar').css('height',percentStart/total*100+'%');
      that.find('div.bar div span').html('%'+percentStart);
      if(percentStart<percent) {percentStart=percentStart+1;}
    },35);

    $(this).find("div.bar div").addClass("load");
});

Answer 4

There are already several good answers here. I would recommend validating your html. Also some of your css was causing weirdness when there was scrolling involved (fixed background images weren't scrolling.)

I took a slightly different approach than everyone else. Instead of using a setInterval I went with $.animate and a step function. Like others, I chose a class to target each of the items: 'fill-me-up'.

Fiddle: http://jsfiddle.net/LFbKs/6/

NOTE : Check the fiddle since I modified the HTML (very slightly) and the css to a larger degree.

// for each item we need to "fill up"
$('.fill-me-up').each(function(){

    // cache DOM references
    var this$ = $(this)
      , bar$ = this$.find('.bar')
      , show$ = this$.find('.show')
      , span$ = bar$.find('div span')

      // the target percentage height for this item
      , p = span$.text()

      // combine '.bar' and '.show' so we can apply the animation to both
      , toAnimate = $().add(bar$).add(show$);

    // add class causing fade-in
    bar$.find('div').addClass('is-visible');

    // animate height to target height over 2 seconds and 
    // at each step, update the span with a truncated value
    toAnimate.animate(
        { height: p+'%' },
        { 
            duration: 2000,
            step: function( currentStep ) {
                span$.html('%'+currentStep.toFixed(0));
            }
        }
    );
});

Cheers