当动态值匹配时，jQuery按类对元素进行分组

Question

我有一个来自VB的数组，它当前以div的集合显示在页面上。我想使用jQuery根据匹配的值对div标记进行分组，但似乎无法使它们匹配。

这就是正在展示的。这些值是基于数组的动态值，所以我不能确定值是否为2020年11月19日，因为可能有100个条目。

<div class="collapsedTime" value="11/19/2020"></div>
<div class="collapsedTime" value="11/19/2020"></div>
<div class="collapsedTime" value="11/18/2020"></div>
<div class="collapsedTime" value="11/18/2020"></div>
<div class="collapsedTime" value="11/17/2020"></div>
<div class="collapsedTime" value="11/17/2020"></div>
<div class="collapsedTime" value="11/17/2020"></div>
<div class="rowTime" value="11/19/2020"></div>
<div class="rowTime" value="11/19/2020"></div>
<div class="rowTime" value="11/19/2020"></div>
<div class="rowTime" value="11/18/2020"></div>
<div class="rowTime" value="11/18/2020"></div>
<div class="rowTime" value="11/17/2020"></div>
<div class="rowTime" value="11/17/2020"></div>
<div class="rowTime" value="11/17/2020"></div>
<div class="rowTime" value="11/17/2020"></div>

这就是我想要的：

<div class="collapsedTime" value="11/19/2020">
<div class="rowTime" value="11/19/2020"></div>
<div class="rowTime" value="11/19/2020"></div>
<div class="rowTime" value="11/19/2020"></div>
</div>
<div class="collapsedTime" value="11/18/2020">
<div class="rowTime" value="11/18/2020"></div>
<div class="rowTime" value="11/18/2020"></div>
</div>
<div class="collapsedTime" value="11/17/2020">
<div class="rowTime" value="11/17/2020"></div>
<div class="rowTime" value="11/17/2020"></div>
<div class="rowTime" value="11/17/2020"></div>
<div class="rowTime" value="11/17/2020"></div>
</div>

我已经能够将collapsedTime类减少到每个值一个实例，但当值匹配时，我无法将rowTimediv附加到它们。我得到的最好的结果是将所有的rowTimes附加到第一个collapseTime中，这没有帮助。任何见解都会受到极大的赞扬。

这是我迄今为止的jQuery：

<script>
$(document).ready(function () {
var found = {};
$('.collapsedTime').each(function (i) {
var $this = $(this);
if (found[$this.attr('value')]) {
$this.remove();
} else {
found[$this.attr('value')] = true;
}
});
});
</script>  

我试过$.find($('.collapsedTime').append($('.rowTime')));在$('.collapsedTime'(.each(函数(i(｛｝(内；但这只是无限循环。我还尝试了4天的.map、.find、when、；我所知道的一切"；，但我什么都没得到。

Answer 1

你走在了正确的轨道上。我保留了您对唯一collapsedTime元素的更改，并根据您的输出将其扩展为添加所需的相关rowTime。我添加了一个outputdiv元素来放置元素结构。

运行下面的示例控制台会记录元素结构。我无法找出在输出中显示的最佳格式，但您可以将其复制到编辑器中以查看生成的结构。

$(document).ready(function () {
var found = {};
$('.collapsedTime').each(function (i) {
var $this = $(this);
if (found[$this.attr('value')]) {
$this.remove();
} else {
found[$this.attr('value')] = true;
// append the collapsedTime element
$('#output').append($this);
// append the rowTime elements with the same time value to the collapsedTime element
$this.append(
$('div[value="' + $this.attr('value') + '"]').filter('.rowTime')
);
}
});
console.log($('#output').html())
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="collapsedTime" value="11/19/2020"></div>
<div class="collapsedTime" value="11/19/2020"></div>
<div class="collapsedTime" value="11/18/2020"></div>
<div class="collapsedTime" value="11/18/2020"></div>
<div class="collapsedTime" value="11/17/2020"></div>
<div class="collapsedTime" value="11/17/2020"></div>
<div class="collapsedTime" value="11/17/2020"></div>
<div class="rowTime" value="11/19/2020"></div>
<div class="rowTime" value="11/19/2020"></div>
<div class="rowTime" value="11/19/2020"></div>
<div class="rowTime" value="11/18/2020"></div>
<div class="rowTime" value="11/18/2020"></div>
<div class="rowTime" value="11/17/2020"></div>
<div class="rowTime" value="11/17/2020"></div>
<div class="rowTime" value="11/17/2020"></div>
<div class="rowTime" value="11/17/2020"></div>
<div style="border: 1px solid" id="output"></div>

---