时间戳

首页 > 解决方案 > 为遇到的每个部分包装 li 项目

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

问题描述

我想知道是否可以在每次 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>

标签： javascriptjquery

解决方案

你可以$.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

推荐阅读