Search code examples
jqueryinsertrow

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

I need make class 3 and 4 in one line.
I have following existing code, and I tried to add between two divs using append,
but it didn't inset div between divs.
Would you please let me know how to make class 3 and 4 in one line?

Existing code that creted using plugin (class 3 and 4 displays in two lines):

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

enter image description here
I want to make like this:

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

enter image description here
Thank you.

Solution

  • As suggested by charlietfl you can use wrapAll to achieve this .Also, other way will be using prev().addBack().wrapAll() this will take previous element from your save-progress and then wrap them in one div.

    Demo Code :

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