jQuery 当动态值匹配时按 class 对元素进行分组
jQuery Group elements by class when dynamic values match
我有一个来自 VB 的数组,当前以 div 为一组显示在页面上。我想使用 jQuery 根据匹配值对 div 标签进行分组,但我似乎无法让它们匹配。
这是正在显示的内容。这些值是基于数组的动态值,所以我不能说 value = 11/19/2020 因为可能有 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 class 减少到每个值一个实例,但我无法在值匹配时将 rowTime divs 附加到它们。我得到的最好结果是将所有 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(function (i) {}); 里面但这只是无限循环。我也尝试了 4 天的 .map、.find、.when、“我所知道的一切”,但我没有取得任何进展。
你走在正确的轨道上。我保留了您对独特的 collapsedTime
元素所做的更改,并根据您的输出将其扩展为根据需要添加相关的 rowTime
。我添加了一个output
div元素来放置元素结构。
运行 下面的示例控制台记录了元素结构。我无法找出在输出中显示的最佳格式,但您可以将其复制到编辑器以查看生成的结构。
$(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>
我有一个来自 VB 的数组,当前以 div 为一组显示在页面上。我想使用 jQuery 根据匹配值对 div 标签进行分组,但我似乎无法让它们匹配。
这是正在显示的内容。这些值是基于数组的动态值,所以我不能说 value = 11/19/2020 因为可能有 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 class 减少到每个值一个实例,但我无法在值匹配时将 rowTime divs 附加到它们。我得到的最好结果是将所有 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(function (i) {}); 里面但这只是无限循环。我也尝试了 4 天的 .map、.find、.when、“我所知道的一切”,但我没有取得任何进展。
你走在正确的轨道上。我保留了您对独特的 collapsedTime
元素所做的更改,并根据您的输出将其扩展为根据需要添加相关的 rowTime
。我添加了一个output
div元素来放置元素结构。
运行 下面的示例控制台记录了元素结构。我无法找出在输出中显示的最佳格式,但您可以将其复制到编辑器以查看生成的结构。
$(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>