javascript - 将特定 Div 包装在新 Div 中

Question

所以我遇到了一个问题，我无法弄清楚如何实现它，在 CodePen 上尝试了几种不同的方法，但不太确定从哪里开始，所以任何建议都会很棒。

我想找到所有以字母 S 结尾的 div 并将它们包装在一个新的 div 中，然后对于字母 R 和 L 也是如此。

现实世界的场景是希望将牛仔裤尺码分组到产品页面上的“小”、“常规”和“长”部分，以实现以下外观:

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

代码笔:https://codepen.io/nickelse/pen/dyPGvJm

Answer 1

您可以尝试使用 .each()、.endsWith() 和 .wrap()。

演示:

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