Как переместить вложенный div на два уровня div в соответствии с родительским?

Question

Я создаю целевую страницу с использованием начальной загрузки и jquery. Один недостаток в том, что я могу изменить html только с помощью jquery, так как html жестко запрограммирован внутренним кодом cms и будет сбрасывать html при его изменении. Таким образом, единственный способ манипулировать кодом с помощью jquery. Короче говоря, у меня есть форма с тегами ввода и меток. Я пытаюсь превратить один столбец тегов ввода и метки в два столбца. До сих пор я создал тег div с собственным классом, который будет вторым столбцом. Теги ввода и метки были добавлены в этот div с именем класса sec1col2, используя функцию jquery wrapAll. Однако мне нужна помощь о том, как переместить этот div из двух родительских div, чтобы div1col2 div мог перемещаться рядом с родительским div под строкой div. Кроме того, существует более одного div с именем класса col-xs-12 в нисходящих строках в html-файле, поэтому его хитрость заключается в попытке нацелить только один класс col-xs-12, в который вложен div sec1col2.

До сих пор я пытался использовать функцию junery .unwrap (). Это только переместило разделитель sec1col2 на один уровень вверх. Спасибо за любую помощь с этим.

<div class="col-xs-12">
    <div class="left-aligned-control field-control-wrapper">
        <div>
            <input value="AlternateEnergy" name="checkboxes" type="checkbox">
            <label class="checkbox-aligned elq-item-label">item1</label><br>
        </div>
        <div>
            <input value="Audio" name="checkboxes" type="checkbox">
            <label class="checkbox-aligned elq-item-label">item2</label><br>
        </div>
        <div>
            <input value="Broadcast" name="checkboxes" type="checkbox">
            <label class="checkbox-aligned elq-item-label">item3</label><br>
        </div>
        <div><input value="Communications" name="checkboxes" type="checkbox">
            <label class="checkbox-aligned elq-item-label">item4</label><br>
        </div>
        <div>
            <div class="col-xl-4 col-md-4 sec1col2">
                <input value="Computing" name="checkboxes" type="checkbox">
                <label class="checkbox-aligned elq-item-label">item5</label>
                <input value="Industrial" name="checkboxes" type="checkbox">
                <label class="checkbox-aligned elq-item-label">item6</label>
                <input value="Instrumentation" name="checkboxes" type="checkbox">
                <label class="checkbox-aligned elq-item-label">item7</label>
                <input value="Lighting" name="checkboxes" type="checkbox">
                <label class="checkbox-aligned elq-item-label">item8</label></div><br>
            </div>

    </div>
        </div>
        </div>

<script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>

        <script>
            $(document).ready(function() {

                        var $sect1inputcol2 = $('input[value=Computing],input[value=Industrial],input[value=Instrumentation],input[value=Lighting]');
                        var $sect1label5col2 = $('label')[5];
                        var $sect1label6col2 = $('label')[6];
                        var $sect1label7col2 = $('label')[7];
                        var $sect1label8col2 = $('label')[8];

                        $($sect1inputcol2).add($sect1label5col2).add($sect1label6col2).add($sect1label7col2).add($sect1label8col2).wrapAll('<div class="col-xl-4 col-md-4 sec1col2" />');

                        $('.sec1col2').unwrap()
            });
        </script>

         <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>

Я ожидаю, что разделитель sec1col2 находится рядом с родительским разделением col-xs-12.

Answer 1

Я предполагаю, что предоставленная вами HTML-разметка не оригинал ... Но тот, который был создан при попытке создать второй столбец.

Я предложу вам другую "Угол атаки ", чтобы решить эту проблему.Преимущество состоит в том, что вам не нужно кодировать его конкретно по значению атрибута name ... И это будет работать для любого количества входных данных из вашего исходного "одного столбца".

Это позволит вамдобавлять, удалять или переименовывать поля ... Разделение столбцов не зависит.Это большое преимущество для будущих разработок вашей веб-страницы.

Итак ... Он использует .append() в обратном цикле, затем .after() дляпоместите вновь созданный второй столбец после первого.«Обратный цикл» - это просто нормальный цикл, но убывающий ... И начиная с последнего элемента, используя метод .eq().

$(document).ready(function() {

  // Start from the inputs wrapper.
  var oneColumn_wrapper = $(".left-aligned-control");
  // Check how many divs inside
  var oneColumn_length = oneColumn_wrapper.find("div").length;
  // Determine what's the half amount of input group (And make sure to have a entire number, not a float)
  var half = Math.round(oneColumn_length/2);
  
  // Create the second column
  var secondInputWrapper = $('<div class="left-aligned-control field-control-wrapper">');

  // Using a reverse loop, append the half of the input groups in a second column
  for(i=oneColumn_length;i>half;i--){
    secondInputWrapper.append(oneColumn_wrapper.find("div").eq(i-1));
  }

  // Append that second column after the first.
  oneColumn_wrapper.after(secondInputWrapper);

});

/* Some assumed CSS */
.left-aligned-control{
  float: left;
  padding-left:1em;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.bundle.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>

<div class="col-xs-12">
  <div class="left-aligned-control field-control-wrapper">
    <div>
      <input value="AlternateEnergy" name="checkboxes" type="checkbox">
      <label class="checkbox-aligned elq-item-label">item1</label><br>
    </div>
    <div>
      <input value="Audio" name="checkboxes" type="checkbox">
      <label class="checkbox-aligned elq-item-label">item2</label><br>
    </div>
    <div>
      <input value="Broadcast" name="checkboxes" type="checkbox">
      <label class="checkbox-aligned elq-item-label">item3</label><br>
    </div>
    <div>
      <input value="Communications" name="checkboxes" type="checkbox">
      <label class="checkbox-aligned elq-item-label">item4</label><br>
    </div>
    <div>
      <input value="Computing" name="checkboxes" type="checkbox">
      <label class="checkbox-aligned elq-item-label">item5</label>
    </div>
    <div>
      <input value="Industrial" name="checkboxes" type="checkbox">
      <label class="checkbox-aligned elq-item-label">item6</label>
    </div>
    <div>
      <input value="Instrumentation" name="checkboxes" type="checkbox">
      <label class="checkbox-aligned elq-item-label">item7</label>
    </div>
    <div>
      <input value="Lighting" name="checkboxes" type="checkbox">
      <label class="checkbox-aligned elq-item-label">item8</label></div><br>
  </div>
</div>