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

Question

我正在使用bootstrap和jQuery创建一个登陆页面。一个缺点是，我只能用jquery更改html，因为html是由cms后端代码硬编码的，更改后会重置html。因此操作代码的唯一方法是使用jQuery。长话短说，我有一个包含输入和标签的表单。我正在尝试将输入和标签标签的一列变成两列。到目前为止，我已经创建了一个具有自己的类的div标记，这将是第二列。使用jquery wrapAll函数，在这个类名为sec1col2的div中添加了Input和label标记。但是，我需要关于如何从两个父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标记不是原始的...而是在尝试创建第二列时生成的。

我会建议你另一个“攻击角度”来解决这个问题。这样做的好处是，您不必专门使用name属性的值对其进行编码...这将适用于来自原始“一列”的任何数量的输入。

允许您添加、删除或重命名字段...列拆分是独立的。这对于您的网页的未来发展是一个很大的优势。

所以...它在反向循环中使用.append(),然后使用.after()将新创建的第二列放在第一列之后。“反向循环”只是一个正常循环，但正在递减...并从最后一个元素开始，使用.eq()方法。

null

$(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>