如何从具有文本值的表中查找下一个类

Question

我试图从一个表中计算每天的消耗量(日期与前一天的日期)。当没有包含空卷的表行时，这是正确的。但是，当某些表行的卷为空时，它就会失败。在下面的代码中，你可以看到我的意思：

<table>
<tr>
<td class="date">2021-08-15</td>
<td class="volume">80</td>
<td class="consumed"></td> // text 30 (110 - 80)
</tr>
<tr>
<td class="date">2021-08-14</td>
<td class="volume">110</td>
<td class="consumed"></td> // text 50 (160 - 110)
</tr>
<tr>
<td class="date">2021-08-13</td>
<td class="volume">160</td>
<td class="consumed"></td> // text 60 (220 - 160)
</tr>
<tr>
<td class="date">2021-08-12</td>
<td class="volume">220</td>
<td class="consumed"></td> 
</tr>
</table>
$('.volume').each(function() {
const next = $(this).parent().next().find('.volume')
$(this).siblings('.consumed').html(+next.html() - $(this).html())
})

上面的工作原理很好，但当我的表看起来像这样时，它失败了：

<table>
<tr>
<td class="date">2021-08-15</td>
<td class="volume">80</td>
<td class="consumed"></td>
</tr>
<tr>
<td class="date">2021-08-15</td>
<td class="volume"></td>
<td class="consumed"></td>
</tr>
<tr>
<td class="date">2021-08-14</td>
<td class="volume">110</td>
<td class="consumed"></td>
</tr>
<tr>
<td class="date">2021-08-14</td>
<td class="volume"></td>
<td class="consumed"></td>
</tr>
<tr>
<td class="date">2021-08-14</td>
<td class="volume"></td>
<td class="consumed"></td>
</tr>
<tr>
<td class="date">2021-08-13</td>
<td class="volume">160</td>
<td class="consumed"></td>
</tr>
<tr>
<td class="date">2021-08-13</td>
<td class="volume"></td>
<td class="consumed"></td>
</tr>
<tr>
<td class="date">2021-08-12</td>
<td class="volume">220</td>
<td class="consumed"></td>
</tr>
</table>

这是一个小提琴应该是什么样子：小提琴

所以我需要这样的东西：

$('.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!

Answer 1

您可以从当前元素中获取所有下一个tr元素，然后过滤掉没有文本的元素，然后从结果中获取第一个元素，这将是您的下一个值。

$('.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;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<h1>Without empty volumes: shows correct</h1>
<table class="table">
<thead>
<tr>
<th>Date</th>
<th>Vol</th>
<th>Consumed</th>
</tr>
</thead>
<tr>
<td class="date">2021-08-15</td>
<td class="volume">80</td>
<td class="consumed"></td>
</tr>
<tr>
<td class="date">2021-08-14</td>
<td class="volume">110</td>
<td class="consumed"></td>
</tr>
<tr>
<td class="date">2021-08-13</td>
<td class="volume">160</td>
<td class="consumed"></td>
</tr>
<tr>
<td class="date">2021-08-12</td>
<td class="volume">220</td>
<td class="consumed"></td>
</tr>
</table>
<!----------------------------------------------->
<br /><br />
<h1>With some empty volumes; now it fails</h1>
<table class="table">
<thead>
<tr>
<th>Date</th>
<th>Vol</th>
<th>Consumed</th>
</tr>
</thead>
<tr>
<td class="date">2021-08-15</td>
<td class="volume">80</td>
<td class="consumed"></td>
</tr>
<tr>
<td class="date">2021-08-15</td>
<td class="volume"></td>
<td class="consumed"></td>
</tr>
<tr>
<td class="date">2021-08-14</td>
<td class="volume">110</td>
<td class="consumed"></td>
</tr>
<tr>
<td class="date">2021-08-14</td>
<td class="volume"></td>
<td class="consumed"></td>
</tr>
<tr>
<td class="date">2021-08-14</td>
<td class="volume"></td>
<td class="consumed"></td>
</tr>
<tr>
<td class="date">2021-08-13</td>
<td class="volume">160</td>
<td class="consumed"></td>
</tr>
<tr>
<td class="date">2021-08-13</td>
<td class="volume"></td>
<td class="consumed"></td>
</tr>
<tr>
<td class="date">2021-08-12</td>
<td class="volume">220</td>
<td class="consumed"></td>
</tr>

Answer 2

+next.html()将在没有值时创建一个NaN。请改用+(next.html() || $(this).html())。

$('.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;
}

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<table>
<tr>
<td class="date">2021-08-15</td>
<td class="volume">80</td>
<td class="consumed"></td>
</tr>
<tr>
<td class="date">2021-08-15</td>
<td class="volume"></td>
<td class="consumed"></td>
</tr>
<tr>
<td class="date">2021-08-14</td>
<td class="volume">110</td>
<td class="consumed"></td>
</tr>
<tr>
<td class="date">2021-08-14</td>
<td class="volume"></td>
<td class="consumed"></td>
</tr>
<tr>
<td class="date">2021-08-14</td>
<td class="volume"></td>
<td class="consumed"></td>
</tr>
<tr>
<td class="date">2021-08-13</td>
<td class="volume">160</td>
<td class="consumed"></td>
</tr>
<tr>
<td class="date">2021-08-13</td>
<td class="volume"></td>
<td class="consumed"></td>
</tr>
<tr>
<td class="date">2021-08-12</td>
<td class="volume">220</td>
<td class="consumed"></td>
</tr>
</table>

Answer 3

攻击它的简单方法，查找带文本的volume元素，不要选择trs元素。

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

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
<tr>
<td class="date">2021-08-15</td>
<td class="volume">80</td>
<td class="consumed"></td>
</tr>
<tr>
<td class="date">2021-08-15</td>
<td class="volume"></td>
<td class="consumed"></td>
</tr>
<tr>
<td class="date">2021-08-14</td>
<td class="volume">110</td>
<td class="consumed"></td>
</tr>
<tr>
<td class="date">2021-08-14</td>
<td class="volume"></td>
<td class="consumed"></td>
</tr>
<tr>
<td class="date">2021-08-14</td>
<td class="volume"></td>
<td class="consumed"></td>
</tr>
<tr>
<td class="date">2021-08-13</td>
<td class="volume">160</td>
<td class="consumed"></td>
</tr>
<tr>
<td class="date">2021-08-13</td>
<td class="volume"></td>
<td class="consumed"></td>
</tr>
<tr>
<td class="date">2021-08-12</td>
<td class="volume">220</td>
<td class="consumed"></td>
</tr>
</table>