Automatically increment adding a class tag [class-(+1)] between two sets of sibling divs

Question

I was wondering if there was a way to automate/condense adding the specific classes ".header-child-accordion .header-child-accordion-set-(incrementing number)" to sibling divs that exist between two controlling sibling divs that contain the class ".mv-header-menu-accordion-(incrementing number)" as opposed to manually dictating the classes from one controlling sibling div to another.

I have done this one by one through identifying if there is, for example, a div that contains ".mv-header-menu-accordion-11" nextUntil ".mv-header-menu-accordion-12".

Is there a way to: $('.mv-header-menu-accordion- + (i+1)').nextUntil('.mv-header-menu-accordion-+ ((i+1)+1)').addClass("header-child-accordion header-child-accordion-set-+ (i+1)");

$(document).ready(function() {
  $(".header-menu-nav-folder-content").each(function() {
    $(this).find('.mv-header-menu-accordion').each(function() {
      $('.mv-header-menu-accordion-1').nextUntil('.mv-header-menu-accordion-2').addClass("header-child-accordion header-child-accordion-set-1");
      $('.mv-header-menu-accordion-2').nextUntil('.mv-header-menu-accordion-3').addClass("header-child-accordion header-child-accordion-set-2");
      $('.mv-header-menu-accordion-3').nextUntil('.mv-header-menu-accordion-4').addClass("header-child-accordion header-child-accordion-set-3");
      $('.mv-header-menu-accordion-4').nextUntil('.mv-header-menu-accordion-5').addClass("header-child-accordion header-child-accordion-set-4");
      $('.mv-header-menu-accordion-5').nextUntil('.mv-header-menu-accordion-6').addClass("header-child-accordion header-child-accordion-set-5");
      $('.mv-header-menu-accordion-6').nextUntil('.mv-header-menu-accordion-7').addClass("header-child-accordion header-child-accordion-set-6");
      $('.mv-header-menu-accordion-7').nextUntil('.mv-header-menu-accordion-8').addClass("header-child-accordion header-child-accordion-set-7");
      $('.mv-header-menu-accordion-8').nextUntil('.mv-header-menu-accordion-9').addClass("header-child-accordion header-child-accordion-set-8");
      $('.mv-header-menu-accordion-9').nextUntil('.mv-header-menu-accordion-10').addClass("header-child-accordion header-child-accordion-set-9");
      $('.mv-header-menu-accordion-10').nextUntil('.mv-header-menu-accordion-11').addClass("header-child-accordion header-child-accordion-set-10");
      $('.mv-header-menu-accordion-11').nextUntil('.mv-header-menu-accordion-12').addClass("header-child-accordion header-child-accordion-set-11");
    });
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="header-menu-nav-folder-content">
  <div class="mv-header-menu-accordion-1 mv-header-menu-accordion">
    <p>Parent 1</p>
  </div>
  <div class="">
    <p>Child 1</p>
  </div>
  <div class="">
    <p>Child 2</p>
  </div>
  <div class="">
    <p>Child 3</p>
  </div>
  <div class="mv-header-menu-accordion-2 mv-header-menu-accordion">
    <p>Parent 2</p>
  </div>
  <div class="">
    <p>Child 1</p>
  </div>
  <div class="">
    <p>Child 2</p>
  </div>
  <div class="">
    <p>Child 3</p>
  </div>
  <div class="mv-header-menu-accordion-3 mv-header-menu-accordion">
    <p>Parent 3</p>
  </div>
  <div class="">
    <p>Child 1</p>
  </div>
  <div class="">
    <p>Child 2</p>
  </div>
  <div class="">
    <p>Child 3</p>
  </div>
  <div class="mv-header-menu-accordion-4 mv-header-menu-accordion">
    <p>Parent 4</p>
  </div>
  <div class="">
    <p>Child 1</p>
  </div>
  <div class="">
    <p>Child 2</p>
  </div>
  <div class="">
    <p>Child 3</p>
  </div>
</div>

score 1 · Accepted Answer · answered Oct 31 '22 at 19:12

The first step towards condensing the code would be to use constant variables in place of long, repeated strings like the class names. Next your nested loop already goes through all the headers so you only need to use this and one call to nextUntil() in each iteration. You already have the set number in this.className you can use a regex to capture that number, whatever it happens to be.

In the following snippet I have added some styles for easy visual confirmation.

const hmaClass = 'mv-header-menu-accordion'
const hcaClass = 'header-child-accordion'
const setNClass = n => `${hcaClass}-set-${n}`
$(document).ready(function() {
  $(".header-menu-nav-folder-content").each(function() {

    $(this).find(`.${hmaClass}`).each(function() {
      // get this set number from this.className
      const setNum = this.className.match(/mv-header-menu-accordion-(\d+)/)[1]
      // .match() returns array with index 1 holding the captured digits (\d+)

      $(this).nextUntil(`.${hmaClass}`) // until the next with the header class
        .addClass(hcaClass)
        .addClass(setNClass(setNum))

    });

  });
});

.mv-header-menu-accordion * {
  color: black;
  font-weight: bolder;
}

.header-child-accordion {
  border: 1px solid blue;
}

[class$=set-27] {
  color: skyblue;
}

[class$=set-1] {
  color: blue;
}

[class$=set-2] {
  color: green;
}

[class$=set-3] {
  color: orange;
}

[class$=set-4] {
  color: red;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="header-menu-nav-folder-content">
  <div class="mv-header-menu-accordion-1 mv-header-menu-accordion">
    <p>Parent 1</p>
  </div>
  <div class="">
    <p>Child 1</p>
  </div>
  <div class="">
    <p>Child 2</p>
  </div>
  <div class="">
    <p>Child 3</p>
  </div>
  <div class="mv-header-menu-accordion-2 mv-header-menu-accordion">
    <p>Parent 2</p>
  </div>
  <div class="">
    <p>Child 1</p>
  </div>
  <div class="">
    <p>Child 2</p>
  </div>
  <div class="">
    <p>Child 3</p>
  </div>
  <div class="mv-header-menu-accordion-3 mv-header-menu-accordion">
    <p>Parent 3</p>
  </div>
  <div class="">
    <p>Child 1</p>
  </div>
  <div class="">
    <p>Child 2</p>
  </div>
  <div class="">
    <p>Child 3</p>
  </div>
  <div class="mv-header-menu-accordion-4 mv-header-menu-accordion">
    <p>Parent 4</p>
  </div>
  <div class="">
    <p>Child 1</p>
  </div>
  <div class="">
    <p>Child 2</p>
  </div>
  <div class="">
    <p>Child 3</p>
  </div>
  <div class="mv-header-menu-accordion-27 mv-header-menu-accordion">
    <p>Parent 27</p>
  </div>
  <div class="">
    <p>Child 1</p>
  </div>
  <div class="">
    <p>Child 2</p>
  </div>
  <div class="">
    <p>Child 3</p>
  </div>
</div>

Ah wow! Thank you so much for the clarification and breakdown. This is super useful :-) — Houghtonator, Nov 01 '22 at 10:21

Mister Jojo · Answer 2 · 2022-10-31T17:43:46.857

0

this way ? Template literals (Template strings)

const
  grpCls = '.mv-header-menu-accordion-'
, clsAdd = 'header-child-accordion header-child-accordion-set-'
  ;
$(document).ready(function()
  {
  $(".header-menu-nav-folder-content").each(function()
    {
    $(this).find('.mv-header-menu-accordion').each(function()
      {
      for (let i=1;i<12;i++)
        $(`${grpCls}${i}`)
            .nextUntil(`${grpCls}${i+1}`)
            .addClass(`${clsAdd}${i}`);
      });
    });
  });

edited Oct 31 '22 at 17:43

answered Oct 31 '22 at 17:37

Mister Jojo

20,093
6
21
40

You don't need template literals since you're just concatenating two things directly. I think `grpCls + (i + 1)` is fine. – kelsny Oct 31 '22 at 18:36
@caTS it's true, but I had the feeling that the PO was looking for the use of templates... – Mister Jojo Oct 31 '22 at 18:48
Thank you for the help :-) I'm learning loads of cool new things – Houghtonator Nov 01 '22 at 10:22

Automatically increment adding a class tag [class-(+1)] between two sets of sibling divs

2 Answers2