Оборачивать содержимое каждый раз, когда появляется класс - возможно?

Question

Я хочу обернуть свой div вокруг моих тегов li каждый раз, когда добавляю li.gsection в форму.

1. Можно ли автоматически обернуть таким образом?Я знаю, как обернуть и обернуть все вручную, но это совсем другое.

2. Третий класс - это всегда мой пользовательский класс.Я хочу, чтобы он был добавлен в оболочку, а затем добавлен _comtainer.

3. Это проблема роскоши, но.Форма использует ajax, это можно загрузить, даже если я использую многочастную форму?Форма с несколькими страницами в пошаговом режиме?

Я немного растерялся и плохо знаком с этим сайтом, но дайте мне знать, если мне сначала нужно что-то сделать.

Keviin.

У меня есть эта разметка в моей форме

<ul>
    <li class="gform gsection info random-class">Title</li>
    <li class="random-class">Name</li>
    <li class="random-class">Email</li>
    <li class="random-class">Phone</li>
    <li class="gform gsection more_info random-class">Title again</li>
    <li class="random-class">Something</li>
    <li class="random-class">Something</li>
    <li class="random-class">Something</li>
    <li class="gform gsection last_info random-class">Title again</li>
    <li class="random-class">Something</li>
    <li class="random-class">Something</li>
</ul>

Я хочу это:

<ul>
    <ul class="section info_container">
        <li class="gform gsection info random-class">Title</li>
        <li class="random-class">Name</li>
        <li class="random-class">Email</li>
        <li class="random-class">Phone</li>
    </ul>
    <ul class="section more_info_container">
        <li class="gform gsection more_info random-class">Title again</li>
        <li class="random-class">Something</li>
        <li class="random-class">Something</li>
        <li class="random-class">Something</li>
    </ul>
    <ul class="section last_info_container">
        <li class="gform gsection last_info random-class">Title again</li>
        <li class="random-class">Something</li>
        <li class="random-class">Something</li>
    </ul>
</ul>

Answer 1

Вам может быть лучше просто подделать это с помощью CSS:

li {
  list-style: circle;
  margin-left: 3em
}

li.gsection {
  list-style: disc;
  margin-left: 0
}

<ul>
  <li class="gform gsection info random-class">Title</li>
  <li class="random-class">Name</li>
  <li class="random-class">Email</li>
  <li class="random-class">Phone</li>
  <li class="gform gsection more_info random-class">Title again</li>
  <li class="random-class">Something</li>
  <li class="random-class">Something</li>
  <li class="random-class">Something</li>
  <li class="gform gsection last_info random-class">Title again</li>
  <li class="random-class">Something</li>
  <li class="random-class">Something</li>
</ul>

... но если вам действительно нужно реструктурировать DOM, вот один из подходов: он работает, находя индекс каждого элемента списка .gsection, сканируявперед, чтобы найти индекс следующего и обернуть эту группу в новый ul.

var refactor = function(parent) {
  var lis = parent.find('li');
  for (var i = 0; i < lis.length; i++) {
    if ($(lis[i]).hasClass('gsection')) {
      // found a header, read the relevant classname:
      var headerClass = "";
      if ($(lis[i]).hasClass('info')) {
        headerClass = "info_container"
      } else if ($(lis[i]).hasClass('more_info')) {
        headerClass = "more_info_container"
      } else if ($(lis[i]).hasClass('last_info')) {
        headerClass = "last_info_container"
      }

      // scan ahead until we find the next header:
      var j = i+1;
      while (j < lis.length) {
        if ($(lis[j]).hasClass('gsection')) break;
        j++
      }
      lis.slice(i+1, j).wrapAll("<ul class='section "+headerClass+"'>");
      i = j-1; // no need to iterate over the elements we just scanned past
    }
  }
}

refactor($('ul'))

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
  <li class="gform gsection info random-class">Title</li>
  <li class="random-class">Name</li>
  <li class="random-class">Email</li>
  <li class="random-class">Phone</li>
  <li class="gform gsection more_info random-class">Title again</li>
  <li class="random-class">Something</li>
  <li class="random-class">Something</li>
  <li class="random-class">Something</li>
  <li class="gform gsection last_info random-class">Title again</li>
  <li class="random-class">Something</li>
  <li class="random-class">Something</li>
</ul>

Форма использует ajax, это можно загрузить, даже если я использую многочастную форму?Форма с несколькими страницами в пошаговом режиме?

Это будет зависеть от того, как именно эти части разбиты, но в общем случае, если вы запустите это в списке каждой части после того, как она будет вставлена ​​в DOM, она должнаработа (за исключением подсписков, которые охватывают более чем одну часть.)