the loop applying the css property from just last value

Question

I made few divs with data-line attribute. I want to loop each divs and take the own value from data-line attribute and apply to width as % but it takes only last value and apply it all of them.

You can look at my code here.

(function processLine() {
		var processBar = $('.process');
		var percent = $('.process-percent .percentage');
		//var id = setInterval(frame, 15);

		function frame() {
			var arrData = [];
			processBar.each(function() {
				var processData = $(this).data('line');
				if (arrData.indexOf(processData) !== processData) {
					arrData.push(processData);
				}
			});


			for (var i = 0; i < arrData.length; i++) {
					processBar.css({
						'width': arrData[i] + '%'
					});
			}

		}

		frame();
})();

.process-bar {
    position: relative;
    max-width: 265px;
    height: 15px;
    background-color: #e4e4e4;
    -webkit-border-radius: 8px;
            border-radius: 8px;
}

#sidebar-left .process-bar {
    width: 265px;
}

.process {
    position: relative;
    width: 70%;
    height: 15px;
    -webkit-border-radius: 8px;
            border-radius: 8px;
    background-color: #aab3c3;
}

.process-percent {
    display: block;
    text-align: right;
    font-size: 9px;
    color: #f9f9f9;
    padding-right: 5%;
    font-weight: 400;
}

.yaris-arrow-progress .process-bar-container {
    margin-bottom: 16px;
}

.yaris-arrow-progress .process-bar-container:last-child {
    margin-bottom: 0;
}

.yaris-arrow-progress .process-bar {
    max-width: 90%;
    width: 90%;
    height: 20px;
    -webkit-border-radius: 0px;
            border-radius: 0px;
    display: flex;
    align-items: center;
}

.yaris-arrow-progress .process-bar::after {
    content: '';
    position: absolute;
    width: 0;
	height: 0;
	border-top: 9px solid transparent;
	border-left: 18px solid #e4e4e4;
	border-bottom: 9px solid transparent;
    top: 0;
    left: 100%;
}

.yaris-arrow-progress .process-bar::before {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 0;
    height: 0;
    border-bottom: 10px solid #f9f9f9;
    border-left: 20px solid transparent;
    border-right: 120px solid #f9f9f9;
    border-top: 10px solid #f9f9f9;
    z-index: 2;
}

.yaris-arrow-progress .process {
    width: 70%;
    height: 20px;
    -webkit-border-radius: 0px;
            border-radius: 0px;
    background: #f8981d;
}

.yaris-arrow-progress .process .bike {
    display: block;
    text-align: right;
    font-size: 16px;
    color: #f9f9f9;
    padding-right: 2%;
    line-height: 0;
}

.yaris-arrow-progress .process::after {
    content: '';
    position: absolute;
    width: 0;
	height: 0;
	border-top: 10px solid transparent;
	border-left: 20px solid #f8981d;
	border-bottom: 10px solid transparent;
    top: 0;
    left: 100%;
    z-index: 1;
}


.yaris-arrow-progress .lap-xp {
    position: absolute;
    z-index: 3;
    font-size: 10px;
    margin-left: 40px;
}

<div class="yaris-arrow-progress">
<div class="process-bar-container">
        <div class="process-bar-wrapper">

            <div class="process-bar ">
                <div class="process" data-line="10">
                    <div class="bike"><span class="lnr lnr-bicycle"></span></div>
                </div>
            </div>
        </div>
    </div>

    <div class="process-bar-container">
        <div class="process-bar-wrapper">

            <div class="process-bar ">
                <div class="process" data-line="65">
                    <div class="bike"><span class="lnr lnr-bicycle"></span></div>
                </div>
            </div>
        </div>
    </div>

    <div class="process-bar-container">
        <div class="process-bar-wrapper">

            <div class="process-bar ">
                <div class="process" data-line="83">
                    <div class="bike"><span class="lnr lnr-bicycle"></span></div>
                </div>
            </div>
        </div>
    </div>

    <div class="process-bar-container">
        <div class="process-bar-wrapper">

            <div class="process-bar">
                <div class="process" data-line="95">
                    <div class="bike"><span class="lnr lnr-bicycle"></span></div>
                </div>
            </div>
        </div>
    </div>
</div>


<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

ibrahim mahrir · Accepted Answer · 2017-07-14 17:09:41Z

You are using processBar inside the for loop to update the CSS width. Since processBar is the collection of all the .process elements, when you call .css on it, all the elements get changed. Try to use .eq(i) to change only the element at the i-th index of that collection.

Plus I don't see why you're using two loops. You can apply CSS directly inside each (where you can use $(this) to target the current element:

function frame() {
    processBar.each(function() {
        var processData = $(this).data('line');
        $(this).css({
//        ^^^^ instead of processBar which changes the whole collection
            'width': processData + '%'
        });
    });
}

(function processLine() {
  var processBar = $('.process');
  var percent = $('.process-percent .percentage');

  function frame() {
    processBar.each(function() {
      var processData = $(this).data('line');
      $(this).css({
        'width': processData + '%'
      });
    });
  }

  frame();
})();

.process-bar {
  position: relative;
  max-width: 265px;
  height: 15px;
  background-color: #e4e4e4;
  -webkit-border-radius: 8px;
  border-radius: 8px;
}

#sidebar-left .process-bar {
  width: 265px;
}

.process {
  position: relative;
  width: 70%;
  height: 15px;
  -webkit-border-radius: 8px;
  border-radius: 8px;
  background-color: #aab3c3;
}

.process-percent {
  display: block;
  text-align: right;
  font-size: 9px;
  color: #f9f9f9;
  padding-right: 5%;
  font-weight: 400;
}

.yaris-arrow-progress .process-bar-container {
  margin-bottom: 16px;
}

.yaris-arrow-progress .process-bar-container:last-child {
  margin-bottom: 0;
}

.yaris-arrow-progress .process-bar {
  max-width: 90%;
  width: 90%;
  height: 20px;
  -webkit-border-radius: 0px;
  border-radius: 0px;
  display: flex;
  align-items: center;
}

.yaris-arrow-progress .process-bar::after {
  content: '';
  position: absolute;
  width: 0;
  height: 0;
  border-top: 9px solid transparent;
  border-left: 18px solid #e4e4e4;
  border-bottom: 9px solid transparent;
  top: 0;
  left: 100%;
}

.yaris-arrow-progress .process-bar::before {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 0;
  height: 0;
  border-bottom: 10px solid #f9f9f9;
  border-left: 20px solid transparent;
  border-right: 120px solid #f9f9f9;
  border-top: 10px solid #f9f9f9;
  z-index: 2;
}

.yaris-arrow-progress .process {
  width: 70%;
  height: 20px;
  -webkit-border-radius: 0px;
  border-radius: 0px;
  background: #f8981d;
}

.yaris-arrow-progress .process .bike {
  display: block;
  text-align: right;
  font-size: 16px;
  color: #f9f9f9;
  padding-right: 2%;
  line-height: 0;
}

.yaris-arrow-progress .process::after {
  content: '';
  position: absolute;
  width: 0;
  height: 0;
  border-top: 10px solid transparent;
  border-left: 20px solid #f8981d;
  border-bottom: 10px solid transparent;
  top: 0;
  left: 100%;
  z-index: 1;
}

.yaris-arrow-progress .lap-xp {
  position: absolute;
  z-index: 3;
  font-size: 10px;
  margin-left: 40px;
}

<div class="yaris-arrow-progress">
  <div class="process-bar-container">
    <div class="process-bar-wrapper">

      <div class="process-bar ">
        <div class="process" data-line="10">
          <div class="bike"><span class="lnr lnr-bicycle"></span></div>
        </div>
      </div>
    </div>
  </div>

  <div class="process-bar-container">
    <div class="process-bar-wrapper">

      <div class="process-bar ">
        <div class="process" data-line="65">
          <div class="bike"><span class="lnr lnr-bicycle"></span></div>
        </div>
      </div>
    </div>
  </div>

  <div class="process-bar-container">
    <div class="process-bar-wrapper">

      <div class="process-bar ">
        <div class="process" data-line="83">
          <div class="bike"><span class="lnr lnr-bicycle"></span></div>
        </div>
      </div>
    </div>
  </div>

  <div class="process-bar-container">
    <div class="process-bar-wrapper">

      <div class="process-bar">
        <div class="process" data-line="95">
          <div class="bike"><span class="lnr lnr-bicycle"></span></div>
        </div>
      </div>
    </div>
  </div>
</div>


<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

Himanshu Upadhyay · Accepted Answer · 2017-07-14 17:21:50Z

1

You can do this with a very simple code. No need to write so much long functions.

$('.process').each(function(){
    var width = $(this).data('line');
    $(this).css('width',width+'%');
});

answered Jul 14, 2017 at 17:21

Himanshu Upadhyay

6,5571 gold badge23 silver badges34 bronze badges

1 Comment

Himanshu Upadhyay Over a year ago

Sorry brother I did not know that you have posted the answer. Our answers are very similar.

Collectives™ on Stack Overflow

the loop applying the css property from just last value

2 Answers 2

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related