CODEWITHSUNDEEP
javascriptjqueryarraysgroupingeach
BatmanPrime
BatmanPrime

Reputation: 13

jQuery Group elements by class when dynamic values match

I have an array from VB that is currently being shown on the page in sets of div's. I want to group the div tags based on matching values using jQuery but I cannot seem to get them to match up.

This is what is showing. The values are dynamic based on the array so I can't say if value = 11/19/2020 because there could be 100's of entries.

<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>

And this is what I am after:

<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>

I've been able to reduce the collapsedTime class to one instance per value but I cannot get the rowTime divs to append to them when the values match. The best I got was appending ALL of the rowTimes to the first collapseTime, which wasn't helpful. Any insight would be greatly praised.

Here is the jQuery that I have thus far:

<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>

I've tried $.find($('.collapsedTime').append($('.rowTime'))); inside the $('.collapsedTime').each(function (i) {}); but that just loops infinitely. I've also tried 4 days worth of .map, .find, .when, ."everything else I know", but I'm not getting anywhere.

Upvotes: 1

Views: 224

Answers (1)

Paul T.
Paul T.

Reputation: 4917

You were on the right track. I kept your change for the unique collapsedTime elements, and expanded that to add the related rowTime as desired based on your output. I added an output div element to place the element structure.

Running the example below console logs the element structure. I could not figure out the best formatting to show in the output, but you can copy that out to an editor to see the generated structure.

$(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>

Upvotes: 0

Related Questions