CODEWITHSUNDEEP
javascriptjqueryhtml
Jack The Baker
Jack The Baker

Reputation: 1903

jQuery iterate integer as orderly

What I have done, iterate integer orderly on elements based on own attribute. but it is not in order, already it set css order to elements like: 2,3,5, but I want to ignore those elements that not have attribute on iterating.

var i = 0;
jQuery('.each-order').each(function() {
  i++;

  if (jQuery(this).attr('data-payment') === '1') {
    console.log(i);
    jQuery(this).css('order', i);
  }
});
#orders {
  display: flex
}

.each-order {
  border: 1px solid red;
  padding: 10px;
  margin: 10px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="orders">
  <div class=each-order data-payment="0">Test 1</div>
  <div class=each-order data-payment="1">Test 2</div>
  <div class=each-order data-payment="1">Test 3</div>
  <div class=each-order data-payment="0">Test 4</div>
  <div class=each-order data-payment="1">Test 5</div>
</div>

Already output:

<div id="orders">
  <div class="each-order" data-payment="0">Test 1</div>
  <div class="each-order" data-payment="1" style="order: 2;">Test 2</div>
  <div class="each-order" data-payment="1" style="order: 3;">Test 3</div>
  <div class="each-order" data-payment="0">Test 4</div>
  <div class="each-order" data-payment="1" style="order: 5;">Test 5</div>
</div>

Desire output:

<div id="orders">
  <div class="each-order" data-payment="0">Test 1</div>
  <div class="each-order" data-payment="1" style="order: 1;">Test 2</div>
  <div class="each-order" data-payment="1" style="order: 2;">Test 3</div>
  <div class="each-order" data-payment="0">Test 4</div>
  <div class="each-order" data-payment="1" style="order: 3;">Test 5</div>
</div>

Upvotes: 0

Views: 35

Answers (1)

T.J. Crowder
T.J. Crowder

Reputation: 1075209

Just don't increment i if you don't use it:

var i = 0;
jQuery('.each-order').each(function() {
  if (jQuery(this).attr('data-payment') === '1') {
    jQuery(this).css('order', ++i); // Prefix increment, only if you use it
  }
});

Updated snippet:

var i = 0;
jQuery('.each-order').each(function() {
  if (jQuery(this).attr('data-payment') === '1') {
    jQuery(this).css('order', ++i); // Prefix increment, only if you use it
  }
});
#orders {
  display: flex
}

.each-order {
  border: 1px solid red;
  padding: 10px;
  margin: 10px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="orders">
  <div class=each-order data-payment="0">Test 1</div>
  <div class=each-order data-payment="1">Test 2</div>
  <div class=each-order data-payment="1">Test 3</div>
  <div class=each-order data-payment="0">Test 4</div>
  <div class=each-order data-payment="1">Test 5</div>
</div>

Upvotes: 2

Related Questions