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

Posted 2023-05-09

【中文标题】如何将嵌套 div 向上移动两个 div 级别以匹配父级？

【英文标题】：How to move nested div up two div levels to match parent?

【发布时间】：2019-08-25 15:26:48

【问题描述】：

我正在使用引导程序和 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>

我希望在父 col-xs-12 div 旁边有 sec1col2 div。

【问题讨论】：

发布的 HTML 标记是后端生成的原始未更改标记吗？ 或者你实际达到的结果？

【参考方案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>

【讨论】：

太棒了！那你可以accept the answer吗？