Question 138791 in Jquery Question posted in
The official Jquery Api Documentation can be found here.

Can I use JQuery to wrap items in a container?

I can’t change the markup because it’s generated by my CMS.

Therefore, I need my current markup:

<details class="js-form-wrapper>
  <summary></summary>
  <div></div>
  <div></div>
  <table class="responsive"></table>
  <div class="js-form-type-managed-file"></div>
</details>

To become like this using JQuery:

<details class="js-form-wrapper>
    <summary></summary>
    <div></div>
    <div></div>
  <div class="my-wrapper">
    <table class="responsive"></table>
    <div class="js-form-type-managed-file"></div>
  </div>
</details>
Tags:

2

Answers


  1. 0

    There’s probably a few ways to do this but a simple one would be:

    $('table').next().addBack().wrapAll('<div class="my-wrapper">');

    $('details table').next().addBack().wrapAll('<div class="my-wrapper">');
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<details class="js-form-wrapper">
  <summary></summary>
  <div></div>
  <div></div>
  <table class="responsive"></table>
  <div class="js-form-type-managed-file "></div>
</details>
    Login or Signup to reply.
  2. 0

    You can use .wrapAll() and call multiple elements since they are not under one parent tag

    <details class="js-form-wrapper">
  <summary>summ</summary>
  <div>div 1</div>
  <div>div 2</div>
  <table class="responsive"></table>
  <div class="js-form-type-managed-file">child</div>
</details>

      $(".js-form-wrapper table, .js-form-type-managed-file").wrapAll('<div class="my-wrapper"></div>');

    $(document).ready(function() {
  $(".js-form-wrapper table, .js-form-type-managed-file").wrapAll('<div class="my-wrapper"></div>');
});
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<details class="js-form-wrapper">
  <summary>summary</summary>
  <div>div 1</div>
  <div>div 2</div>
  <table class="responsive"></table>
  <div class="js-form-type-managed-file">inspect here to see wrap</div>
</details>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search