длина div javascript, если значение больше

Question

Мне нужна ваша помощь, чтобы узнать длину класса div, если, например, значение> = 20

<td class="total">23</td>
<td class="total">12</td>
<td class="total">3</td>
<td class="total">42</td>

в моем примере у меня есть 4 записи для общего количества классов.но результат должен быть 2, потому что только 2 записи> = 20

это моя попытка:

   $(".total").each(function() {
      var val = $.trim( $(this).text() );
      if ( val >= 20) {
          val = parseFloat( val.replace( /^\$/, "" ) );
          length = $(".total").length // but this will show me all records which is not correct
          sum += !isNaN( val ) ? val : 0;
      }
    });
    console.log( sum );
    console.log( length );

Answer 1

Вы можете фильтровать ячейки по их внутреннему тексту больше 20

.

console.log(
  $('.total').filter((index,td)=>parseInt(td.innerText, 10)>=20).get()
);

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table><tr>
<td class="total">23</td>
<td class="total">12</td>
<td class="total">3</td>
<td class="total">42</td>
</tr>
</table>

Answer 2

Вы можете использовать Reduce для создания объекта, содержащего sum и length значений:

let result = [...document.querySelectorAll('.total')].reduce((obj, itm) => {
  let val = parseFloat(itm.textContent)
  if(val >= 20) {
    obj.sum += val
    obj.length++
    obj.items.push(itm)
  }
  return obj
}, {sum: 0, length: 0, items: []})

console.log(result)

<table>
  <tr>
    <td class="total">23</td>
    <td class="total">12</td>
    <td class="total">3</td>
    <td class="total">42</td>
  </tr>
</table>

Answer 3

вы должны увеличить значение длины, если ваш критерий соответствует

var length = 0;
 $(".total").each(function() {
      var val = $.trim( $(this).text() );
      if ( val >= 20) {
          val = parseFloat( val.replace( /^\$/, "" ) );
          length++;
          sum += !isNaN( val ) ? val : 0;
      }
    });
    console.log( sum );
    console.log( length );