jquery - 如何插入 在使用 jQuery (wordpress) 的许多 div 之间？

Question

我需要将 3 级和 4 级排成一行。
我有以下现有代码，我尝试使用 append 在两个 div 之间添加，
但它没有在 div 之间插入 div。
你能告诉我如何把3级和4级排成一行吗？

使用插件创建的现有代码（类 3 和 4 显示为两行）：

<form class="acfef-form">
     <div class="1"></div>
     <div class="2"></div>
     <div class="3">
          <div class="3-1"><input class="acfef-submit-button" type="submit"></div>
     </div>
     <div class="4"><input class="save-progress-button" name="save_progress" type="submit"></div>
</form>

我想做这样的：

<form class="acfef-form">
     <div class="1"></div>
     <div class="2"></div>
     <div>
           <div class="3">
                <div class="3-1"><input class="acfef-submit-button" type="submit"></div>
           </div>
           <div class="4"><input class="save-progress-button" name="save_progress" type="submit"></div>
     </div>
</form>

谢谢你。

标签： jqueryinsertrow

Answer 1

正如charlietfl所建议的那样，您可以使用它wrapAll来实现这一点。此外，另一种方法是使用prev().addBack().wrapAll()它将从您的保存进度中获取前一个元素，然后将它们包装在一个 div 中。

演示代码：

//$("form.acfef-form .acf-form-submit , .save-progress-buttons").wrapAll("<div class='abc'></div>")
//or 
$("form.acfef-form .save-progress-buttons:last").prev().addBack().wrapAll("<div class='abc' />");

.abc {
  display: flex;
}

.abc>div {
  margin: 10px;
  padding: 10px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
<form class="acfef-form -submit" action="" method="post" autocomplete="disableacf" novalidate="novalidate" data-widget="fc7226d" id="acf-form-fc7226d12597" enctype="multipart/form-data">
  <div class="acf-form-data acf-hidden">
    <input type="hidden" name="_acf_screen" value="acfef_form"><input type="hidden" name="_acf_post_id" value="12597"><input type="hidden" name="_acf_nonce" value="fb285841f9"><input type="hidden" name="_acf_validation" value="1"><input type="hidden"
      name="_acf_changed" value="0"><input type="hidden" name="_acf_status" value=""><input type="hidden" name="_acf_form" value="QzNx"><input type="hidden" name="_acf_main_action" value="edit_post"><input type="hidden" name="_acf_screen_id" value="3358">
    <input type="hidden" name="_acf_element_id" value="fc7226d"> </div>
  <div class="acf-fields acf-form-fields -top">
    <div class="acf-field acf-field-product-title acf-field-6053b2640eef9 elementor-repeater-item-b95d154" data-name="title" data-type="product_title" data-key="field_6053b2640eef9">
      <div class="acf-label">
      </div>

      <div class="acf-field acf-field-textarea acf-field-60bc51af899c4 elementor-repeater-item-b95d154" data-name="extra-request" data-type="textarea" data-key="field_60bc51af899c4">
        <div class="acf-label">
          <label for="acf-field_60bc51af899c4">ETC</label></div>
        <div class="acf-input">
          <textarea id="acf-field_60bc51af899c4" name="acf[field_60bc51af899c4]" rows="8"></textarea></div>
      </div>
    </div>
  </div>
  <div class="acf-form-submit">
    <div class="acfef-submit-buttons"><input type="submit" class="acfef-submit-button acf-button button button-primary" data-state="publish" value="Submit"></div>
  </div>
  <div class="save-progress-buttons">
    <input formnovalidate="" type="submit" class="save-progress-button acf-submit-button acf-button button" value="Save Draft" name="save_progress" data-state="revision"></div>

</form>