在新的 Div 中包装特定的 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

Answer 1

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>

Answer 2

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