>source

내가 한 일은 자신의 속성을 기반으로 요소를 정수 순서대로 반복합니다. 그러나 그것은 순서가 아니며 이미 CSS를 설정했습니다.  2,3,5와 같은 요소에 있지만 반복에 속성이없는 요소는 무시하고 싶습니다.

order

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>

  • 답변 # 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>
    
    

  • 이전 twincat - TC3_IoT_Communication을 사용한 MQTT;MQTT 브로커와 연결되지 않았지만 오류가 없습니다
  • 다음 c - 경고 - 호환되지 않는 포인터 유형에서 'inet_aton'의 인수 2를 전달하는 중… 오류