Wrapping Specific Divs in a New Div

Question

So I've got an issue that I can't get my head around on how to achieve it, tried a few different methods on CodePen but not really sure where to start so any advice would be awesome.

I want to find all divs that end with the letter S and wrap them in a new div, then the same for the letters R and L.

The real world scenario is wanting to group jean sizes together in to 'Small', 'Regular' and 'Long' sections on a product page to achieve the look below:

<div class="small__stuff"></div>
<div class="reg__stuff"></div>
<div class="large__stuff"></div>

<div class="content__wrapper">
    <div class="content__container">    
        <div class="content__item">
            <span>30S</span>
        </div>

        <div class="content__item">
            <span>30R</span>
        </div>

        <div class="content__item">
            <span>30L</span>
        </div>

        <div class="content__item">
            <span>32S</span>
        </div>

        <div class="content__item">
            <span>32R</span>
        </div>

        <div class="content__item">
            <span>32L</span>
        </div>

        <div class="content__item">
            <span>34S</span>
        </div>

        <div class="content__item">
            <span>34R</span>
        </div>

        <div class="content__item">
            <span>34L</span>
        </div>

        <div class="content__item">
            <span>36S</span>
        </div>

        <div class="content__item">
            <span>36R</span>
        </div>

        <div class="content__item">
            <span>36L</span>
        </div>

        <div class="content__item">
            <span>38S</span>
        </div>

        <div class="content__item">
            <span>38R</span>
        </div>

        <div class="content__item">
            <span>38L</span>
        </div>

        <div class="content__item">
            <span>40S</span>
        </div>

        <div class="content__item">
            <span>40R</span>
        </div>

        <div class="content__item">
            <span>40L</span>
        </div>
    </div>  
</div>

CodePen: https://codepen.io/nickelse/pen/dyPGvJm

Does this answer your question? [jQuery: find element by text](https://stackoverflow.com/questions/7321896/jquery-find-element-by-text) — Liam, Dec 09 '19 at 14:11
Sounds like it'd be easier to do this server-side. Where is the data coming from? — user7290573, Dec 09 '19 at 14:12
if you have access to the data, i'd normalize it into 3 groups before rendering, that should be more logical (and performant?), otherwise you're getting yourself into a weird loop: 1. get data, 2. render data, 3. find places where the data should be grouped, 4. make necessary changes, 5. render again. The alternative would be 1. get data, 2. normalize data, 3. render data — Abdul Ahmad, Dec 09 '19 at 14:14
Yeah no access to the data, unfortunately, it's for an A/B test so this will change if successful :) — Nick Else, Dec 09 '19 at 14:18

Mamun · Accepted Answer · 2019-12-09T14:27:23.793

You can try with .each(), .endsWith() and .wrap().

Demo:

$('.content__item').each(function(){
  var text = $(this).find('span').text();
  if(text.endsWith('S')){
    $(this).wrap("<div class='parent_S'></div>") ;
  }
  else if(text.endsWith('R')){
    $(this).wrap("<div class='parent_R'></div>") ;
  }
  else if(text.endsWith('L')){
    $(this).wrap("<div class='parent_L'></div>") ;
  }
});

.parent_S{
  color: red;
  font-size: 12px;
}
.parent_R{
  color: green;
}
.parent_L{
  color: blue;
  font-size: 18px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="small__stuff"></div>
<div class="reg__stuff"></div>
<div class="large__stuff"></div>

<div class="content__wrapper">
    <div class="content__container">    
        <div class="content__item">
            <span>30S</span>
        </div>

        <div class="content__item">
            <span>30R</span>
        </div>

        <div class="content__item">
            <span>30L</span>
        </div>

        <div class="content__item">
            <span>32S</span>
        </div>

        <div class="content__item">
            <span>32R</span>
        </div>

        <div class="content__item">
            <span>32L</span>
        </div>

        <div class="content__item">
            <span>34S</span>
        </div>

        <div class="content__item">
            <span>34R</span>
        </div>

        <div class="content__item">
            <span>34L</span>
        </div>

        <div class="content__item">
            <span>36S</span>
        </div>

        <div class="content__item">
            <span>36R</span>
        </div>

        <div class="content__item">
            <span>36L</span>
        </div>

        <div class="content__item">
            <span>38S</span>
        </div>

        <div class="content__item">
            <span>38R</span>
        </div>

        <div class="content__item">
            <span>38L</span>
        </div>

        <div class="content__item">
            <span>40S</span>
        </div>

        <div class="content__item">
            <span>40R</span>
        </div>

        <div class="content__item">
            <span>40L</span>
        </div>
    </div>  
</div>

Thanks dude, can definitely work with this further too :D – Nick Else Dec 09 '19 at 15:43 — Nick Else, Dec 09 '19 at 15:43

score 0 · Answer 2 · answered Dec 09 '19 at 14:22

As per this thread.

[id$='someId'] will match all ids ending with someId.

So basically in your case:

const sDivs = document.querySelectorAll('div[id$="S"]'); // Capital S
const sDivsContainer = document.querySelector('.small__stuff');

[...sDivs].forEach(div => sDivsContainer.appendChild(div));

Wrapping Specific Divs in a New Div

2 Answers2