Jquery在$each内独立迭代

Question

https://codepen.io/rurounisena/pen/NeGjyq?editors=1111

$(document).ready(function() {
addTargetClasses();
checkReceived();
});
(function($) {
$(function() {
var orgDates = $('table tr td span');

var message = '';


///////////
orgDates.each(function(i, elem) {


parts = $(this).text().split('/');

dt = new Date(parts[2], parts[0] - 1,parts[1]).getTime();
diffdate = Math.floor((dt - new Date().getTime()) / (86400 * 1000));

if (diffdate === 0 || diffdate === -1) {
return;
}
if (diffdate > 0 ||       $(this).parents('tr.targetRow').find('lastCell').hasClass('crossout')) {          
return;          
}
if ((diffdate + 2) < 1) {

if ((diffdate + 2) == 0) {
diffdate = (diffdate + 1) + ' day ago';
}
else {
diffdate = (diffdate + 1) + ' days ago';
}
}

diffdate = diffdate.toString().slice(1);


state = $(elem).parents('.targetTable tr.targetRow').find("td:nth-child(1)").text();
mailType = $(elem).parents('.targetTable tr.targetRow').find(" td:nth-child(2)").text();

message += state + ' ' + mailType + ' was due ' + diffdate + '<br/>';
});
$.alert({
theme: "my-theme",

title: "<span style='font-size:25px;'>"  + "</span>",
content: "The following bulk is past the expected received date:"+ "<br/>" + "<br/>" + message,
draggable: true,
animationBounce: 1.5,
buttons: {
Dismiss: function() {
}
}
});

$('span[title*="Bulk Tracking"]').after("<button id='alert_btn' type='button'>See Alerts</button>");
$('#alert_btn').after('<div id="emmacontainer" class="emmacontainer"><div class="container__inner"><div class="subDiv"></div> </div></div>');
$('.subDiv').append(message);
$('#emmacontainer').hide();
$('#alert_btn').click(function(){
$('#emmacontainer').slideToggle(400);
});
})
})
(jQuery);
function addTargetClasses() {
$("table[summary*='Bulk'] ").addClass("targetTable");
$(".targetTable tr").addClass("targetRow");
}
function checkReceived() {
$('.targetTable td.lastCell:contains("Received")').addClass('crossout');
};

.crossout {
text-decoration: line-through;
}
/* popup */
.jconfirm.jconfirm-my-theme .jconfirm-box {
background-color: #fdfdfd;
border: 5px solid #003d5d;
font-family: 'Hind Madurai', sans-serif;
width: 40%;
}
.jconfirm.jconfirm-my-theme .jconfirm-box .jconfirm-content{
width: 40%;
border: 2px solid #00b4a9;
padding: 5px;
line-height: 1.4;
}
.jconfirm.jconfirm-my-theme .jconfirm-box .jconfirm-buttons button{
background-color: #96989a;
color: #003d5d;
}
/* on click hidden div*/
.emmacontainer {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
max-width: 100%;
margin-left: 20px;
}
.container__inner{
background: #00b4a9;
flex: 0 1 auto;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
border: 10px solid #003d5d;
box-sizing: border-box;
}
.subDiv {
background-color: white;
max-height: 80%;
overflow-y: auto;
}
.emmacontainer div {
font-size: 15px;
padding: .5em;
flex: 0 1 auto;
}
#alert_btn {
-moz-box-shadow: 0px 10px 14px -7px #276873;
-webkit-box-shadow: 0px 10px 14px -7px #276873;
box-shadow: 0px 10px 14px -7px #276873;
background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #599bb3), color-stop(1, #408c99));
background:-moz-linear-gradient(top, #599bb3 5%, #408c99 100%);
background:-webkit-linear-gradient(top, #599bb3 5%, #408c99 100%);
background:-o-linear-gradient(top, #599bb3 5%, #408c99 100%);
background:-ms-linear-gradient(top, #599bb3 5%, #408c99 100%);
background:linear-gradient(to bottom, #599bb3 5%, #408c99 100%);
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#599bb3', endColorstr='#408c99',GradientType=0);
background-color:#00aba9;
-moz-border-radius:8px;
-webkit-border-radius:8px;
border-radius:8px;
display:inline-block;
cursor:pointer;
color:#ffffff;
font-family:Arial;
font-size:10px;
font-weight:bold;
padding:8px 27px;
text-decoration:none;
text-shadow:0px 1px 0px #3d768a;
margin-left: 20px;
margin-bottom: 5px;
}
#alert_btn:hover {
background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #408c99), color-stop(1, #599bb3));
background:-moz-linear-gradient(top, #408c99 5%, #599bb3 100%);
background:-webkit-linear-gradient(top, #408c99 5%, #599bb3 100%);
background:-o-linear-gradient(top, #408c99 5%, #599bb3 100%);
background:-ms-linear-gradient(top, #408c99 5%, #599bb3 100%);
background:linear-gradient(to bottom, #408c99 5%, #599bb3 100%);
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#408c99', endColorstr='#599bb3',GradientType=0);
background-color:#408c99;
}
#alert_btn:active {
position:relative;
top:1px;
}

<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title></title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jquery-confirm/3.3.0/jquery-confirm.min.css">

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.js"></script>
<script
src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"
integrity="sha256-T0Vest3yCU7pafRw9r+settMBX6JkKN06dqBnpQ8d30="
crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-confirm/3.3.0/jquery-confirm.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-cookie/1.4.1/jquery.cookie.js"></script>

</head>
<body>
<div class='myDiv'>
<table summary='Bulk Tracking'>
<span title='Bulk Tracking'>Bulk Tracking</span>

<tr>
<td>IL</td>
<td>NR</td>
<td><span class='ms-nowrap'>12/1/2018</span></td>
<td>65</td>
<td class='lastCell'>Waiting For</td>
</tr>
<tr>
<td>TX</td>
<td>FT</td>
<td><span class='ms-nowrap'>12/9/2018</span></td>
<td>22</td>
<td class='lastCell'>Waiting For</td>
</tr>
<tr>
<td>WY</td>
<td>ND</td>
<td><span class='ms-nowrap'>12/25/2018</span></td>
<td>721</td>
<td class='lastCell'>Waiting For</td>
</tr>
<tr>
<td>MT</td>
<td>NR</td>
<td><span class='ms-nowrap'>12/7/2018</span></td>
<td>33</td>
<td class='lastCell'>Waiting For</td>
</tr>
<tr>
<td>AK</td>
<td>LR</td>
<td><span class='ms-nowrap'>12/7/2018</span></td>
<td>222</td>
<td class='lastCell'>Waiting For</td>
</tr>
<tr>
<td>VA</td>
<td>ARR</td>
<td><span class='ms-nowrap'>12/8/2018</span></td>
<td>15</td>
<td class='lastCell'>Received</td>
</tr>
</table>
</div>

</body>
</html>

上述代码按预期工作。我循环浏览表中的日期，检查它们是否过期，并输出一个包含相关数据的字符串。问题是，当有很多项目过期时，警报和按钮div中的文本会变得太长。所以我希望把相同的日期组合在一起，以节省一些空间。例如，代替这个：

• IL NR于13天前到期
• TX FT于5天前到期
• MT NR于7天前到期
• AK LR 7天前到期
• VA ARR于6天前到期

我希望它读起来像这样：

• IL NR于13天前到期
• TX FT于5天前到期
• MT NR和AK LR于7天前到期
• VA ARR于6天前到期

我曾尝试迭代每个循环中的diffdate-var和$elem，但我从未得到预期的输出。我对js和jquery还比较陌生，所以如果有任何帮助或建议，我们将不胜感激！

Answer 1

创建一个中间步骤，其中不添加字符串

"IL NR于13天前到期">

在你的结果中，添加一些更有用的

["IL NR"，-13]

创建一个函数来获取这些结果，并将它们转换为您想要输出的最终字符串(即，获取输入["IL NR"，-13]并输出"IL NR是13天前到期的"(，但只有在您根据每个元素的第二个(过期天数(值合并结果之后