如何将嵌套div向上移动两个div级别以匹配父级？

Question

我正在使用引导程序和jquery创建登录页面。一个缺点是我只能用jquery更改html，因为html是由cms后端代码硬编码的，并且在更改时会重置html。因此，操纵代码的唯一方法是使用jquery。 长话短说，我有一个带有输入和标签标签的表格。我试图将输入和标签标签的一栏变成两栏。到目前为止，我已经使用其自己的类创建了一个div标签，这将是第二列。使用jQuery wrapAll函数在此div中添加了类名sec1col2的输入和标签标签。但是，我需要有关如何从两个父div移出此div的帮助，因此sec1col2 div可以移到父div的旁边，位于div行下。 另外，在html文件的降序行中，有不止一个带有col-xs-12类名称的div，因此，它的技巧是只针对sec1col2 div嵌套在其中的一个col-xs-12类。

到目前为止，我已经尝试使用.unwrap（）jquery函数。这仅将sec1col2 div上移了一个级别。 感谢您的协助。

<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 div放在父col-xs-12 div旁边。

Answer 1

我认为您提供的HTML标记不是原始的...而是您尝试创建第二列所产生的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>