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

Posted 2023-05-09

【中文标题】当动态值匹配时，jQuery 按类对元素进行分组

【英文标题】：jQuery Group elements by class when dynamic values match

【发布时间】：2021-03-03 08:06:30

【问题描述】：

我有一个来自 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 类减少到每个值一个实例，但是当值匹配时，我无法让 rowTime div 附加到它们。我得到的最好的结果是将所有的 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、.“我所知道的所有其他内容”，但我没有得到任何结果。

【参考方案1】：

你在正确的轨道上。我保留了您对唯一 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>

---

【讨论】：

非常感谢！我只是被这个难住了。