为遇到的每个部分包装 li 项目

Question

我想知道是否可以在每次 li 项具有类 .gsection 时将我的列表项包装到 ul 中？所以我想寻找 li.gsection 标签，然后它们会包装所有项目，直到找到下一个 li.gsection。 ul 包装器还应该添加两个类，其中一个是动态的。 li.gsection 始终是第二个类名，而我的添加类始终是第三个。

我在 wordpress 中使用重力形式，所以我无法编辑 html 标记。

如果我需要更多地解释自己，请告诉我。

我现在拥有的：

<ul class="myList">
  <li class="gfield gsection contactInfo otherClassesIsAdded">Contact Info</li>
  <li>Number</li>
  <li>Mail</li>
  <li class="gfield gsection contactInfo otherClassesIsAdded">Company info</li>
  <li>Company name</li>
  <li>Mail</li>
  <li class="gfield gsection contactInfo otherClassesIsAdded">Extra Info</li>
  <li>URL</li>
  <li>Notes</li>
</ul>



<ul class="myList">
   <li class="gsectionWrapper contactInfoWrapper">
     <ul>
      <li class="gfield gsection contactInfo otherClassesIsAdded">Contact Info</li>
      <li>Number</li>
      <li>Mail</li>
    </ul>
  </li>
  <li class="gsectionWrapper companyInfoWrapper">
    <ul>
      <li class="gfield gsection companyInfo otherClassesIsAdded">Company info</li> 
      <li>Company name</li>
      <li>Mail</li>
    </ul>
  </li>
  <ul>
  <li class="gsectionWrapper extraInfoWrapper">
    <ul>
      <li class="gfield gsection contactInfo otherClassesIsAdded">Extra Info</li>
      <li>URL</li>
      <li>Notes</li>
    </ul>
  </li>
</ul>

Answer 1

一旦识别出一组li 元素，就可以使用jQuery wrapAll 函数。为了识别这些，我建议迭代 .gfield 元素，然后抓取所有下一个（使用nextAll），直到遇到下一个.gfield（或列表末尾）：

var $allFields = $("ul li.gfield");
$allFields.each(function (i) {
    var $group = $(this).nextAll("li").addBack();
    if (i < $allFields.length - 1) {
        $group = $group.slice(0, $group.index($allFields.get(i+1)));
    }
    var className = $(this).attr('class').match(/\b\w+Info\b/) || "";
    $group.wrapAll("<li class='gsectionWrapper " + className + "Wrapper'><ul>");
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul class="myList">
  <li class="gfield gsection contactInfo otherClassesIsAdded">Contact Info</li>
  <li>Number</li>
  <li>Mail</li>
  <li class="gfield gsection companyInfo otherClassesIsAdded">Company info</li>
  <li>Company name</li>
  <li>Mail</li>
  <li class="gfield gsection extraInfo otherClassesIsAdded">Extra Info</li>
  <li>URL</li>
  <li>Notes</li>
</ul>

Answer 2

你可以使用$.children() 和$.each()

const list = $('#myList')
let wrapper;
list.children('li')
  .each(function(){
  const current = $(this)
  if(current.hasClass('gsection')){
    wrapper = $('<ul class="gsectionWrapper contactInfoWrapper"></ul>')
    list.append(wrapper)
  }
   list.detach(current)
   wrapper.append(current)
})

<ul id='myList' class="myList">
  <li class="gfield gsection contactInfo otherClassesIsAdded">Contact Info</li>
  <li>Number</li>
  <li>Mail</li>
  <li class="gfield gsection contactInfo otherClassesIsAdded">Company info</li>
  <li>Company name</li>
  <li>Mail</li>
  <li class="gfield gsection contactInfo otherClassesIsAdded">Extra Info</li>
  <li>URL</li>
  <li>Notes</li>
</ul>

这是一个工作示例https://codepen.io/medmor/pen/eYOLrBE