如何使用 jQuery (wordpress) 在许多 div 之间插入 <div> </div>？

Question

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

使用插件创建的现有代码（class 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>

谢谢。

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>

如何使用 jQuery (wordpress) 在许多 div 之间插入 <div> </div>？

How to insert <div> </div> between many divs using jQuery (wordpress)?

jquery

row

insert