How to find the next class from table which has a text value

Question

i am trying to calculate the consumed volume from a table from each day (date with it's previous date). When there are no table rows with empty volumes, this works correct. But when there are some table rows which have empty volumes, it fails. In code below you can see what i mean:

 // text 30 (110 - 80)
   // text 50 (160 - 110)
   // text 60 (220 - 160)
  
  
    2021-08-15
    80
    
  
    2021-08-14
    110
    
  
    2021-08-13
    160
    
  
    2021-08-12
    220
     
  


$('.volume').each(function() {
  const next = $(this).parent().next().find('.volume')
  $(this).siblings('.consumed').html(+next.html() - $(this).html())
})

Above works great but it fails when my table looks like this:

Here is a fiddle how it should look like: Fiddle

So i need something like:

$('.volume').each(function() {
  const next = $(this).parent().next().find('.volume')// find next volume if not empty!
  $(this).siblings('.consumed').html(+next.html() - $(this).html()) // which belongs to a volume which is not empty!

user_4620771 · Answer

You could get all next tr elements from the current one and then filter out the ones without the text and then take the first one from that result and that will be your next value.

$('.volume').each(function() {
  const currentValue = $(this).text();
  const nextValue = $(this)
    .parent('tr')
    .nextAll('tr')
    .filter(function() {
      return $(this).find('.volume').text().length;
    }).first().find('.volume').text()

  if (currentValue && nextValue) {
    $(this).next('.consumed').text(
      Number(nextValue) - Number(currentValue)
    )
  }
})

td.date, td.volume, td.consumed {
  border: 1px solid #ccc;
  padding: 5px;
}
h1 {
  font-weight: bold;
  font-size:20px;
}


Without empty volumes: shows correct


  
    
      Date
      Vol
      Consumed
    
  
  
    2021-08-15
    80
    
  
  
    2021-08-14
    110
    
  
  
    2021-08-13
    160
    
  
  
    2021-08-12
    220
    
  





With some empty volumes; now it fails

  
    
      Date
      Vol
      Consumed
    
  
  
    2021-08-15
    80
    
  
  
    2021-08-15
    
    
  
  
    2021-08-14
    110
    
  
  
    2021-08-14
    
    
  
  
    2021-08-14
    
    
  
  
    2021-08-13
    160
    
  
  
    2021-08-13
    
    
  
  
    2021-08-12
    220

user_1444609 · Answer

+next.html() will create a NaN when there isn't a value there. Try +(next.html() || $(this).html()) instead.

$('.volume').each(function() {
  const next = $(this).parent().next().find('.volume')
  var next_val = +(next.html() || $(this).html());
  $(this).siblings('.consumed').html(next_val - $(this).html())
})

td{
 border: 1px solid black;
}

user_14104 · Answer

Easy way to attack it, look for the volume elements with text, do not select the trs elements.

var volumeElems = $(".volume").not(":empty");
volumeElems.each(function(index, elem){
  if (index===volumeElems.length-1) return;
  const currentElem = $(elem);
  const curr = +currentElem.text();
  const prev = +volumeElems.eq(index+1).text();
  currentElem.next().text(prev-curr);
});

How to find the next class from table which has a text value

3 Answers