jQuery 按顺序迭代整数

Question

我所做的，根据自己的属性对元素进行有序的整数迭代。 但它不是有序的，它已经将 CSS order设置为以下元素：2,3,5，但我想忽略那些在迭代时没有属性的元素。

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>

已输出：

<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>

愿望输出：

<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>

Answer 1

如果不使用它，请不要递增i：

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
  }
});

更新的代码段：

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>