How to create a Parent div for selected multiple child?

Question

<div class="test">
 <div class="1"></div>
 <div class="2"></div>
 <div class="3"></div>
 <div class="4"></div>
</div>

*I want to add parent div only for class 2 & 3. Like below code

<div class="test">
 <div class="1"></div>
     <div class="test1">
        <div class="2"></div>
        <div class="3"></div>
      </div>
 <div class="4"></div>
</div>

Through Javascript or Jquery!*

This could help you https://stackoverflow.com/questions/6838104/pure-javascript-method-to-wrap-content-in-a-div — poo, May 02 '22 at 11:19

Carsten Løvbo Andersen · Answer 1 · 2022-05-02T12:02:24.583

3

To make what you want you can use .wrapAll()

$('.test .2, .test .3').wrapAll("<div class='test1'></div>")

Demo

$('.test .2, .test .3').wrapAll("<div class='test1'></div>")

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="test">
  <div class="1">1</div>
  <div class="2">2</div>
  <div class="3">3</div>
  <div class="4">4</div>
</div>

edited May 02 '22 at 12:02

answered May 02 '22 at 11:32

Carsten Løvbo Andersen

26,637
10
47
77

The person who asked the question wanted to wrap the items in a div with class "test1" not "test". And also the 2 and 3 div, not 1 and 2 divs. – Archit Gargi May 02 '22 at 12:01
@ArchitGargi Thanks for pointing out, just a simple type error – Carsten Løvbo Andersen May 02 '22 at 12:02
You need to update the code too :) – Archit Gargi May 02 '22 at 12:03
Yes now its fine. – Archit Gargi May 02 '22 at 12:04

Alireza · Answer 2 · 2022-05-02T12:48:29.353

You can use this pure js function to do it

I added the css code to show the result, You may dismiss it :)

function wrapper(from, to, parent, wrapClass) {
  const pt = document.querySelector(parent);
  const childs = [...pt.children];
  const wrapHolder = document.createElement('div');
  wrapHolder.className = wrapClass;
  pt.innerHTML = '';
  childs.forEach((child, i) => {
    if (i + 1 < from)
      pt.append(child);
    if (i + 1 >= from && i + 1 <= to) {
      wrapHolder.append(child);
      pt.append(wrapHolder);
    }
    if (i + 1 > to)
      pt.append(child);
  });
}
// for 1st & 2nd parameter you must define the range you want to be selected
// for 3rd parameter you must define the parent of your items
// for 4th parameter you must define the new parent div class for the selected childs
wrapper(6, 10, '.test', 'test1');

.test>div:not(div.test1) {
  margin: 5px;
}

.test1>div {
  margin: 5px;
  color: white;
  background: lightsalmon;
}

<div class="test">
  <div class="1">1</div>
  <div class="2">2</div>
  <div class="3">3</div>
  <div class="4">4</div>
  <div class="5">5</div>
  <div class="6">6</div>
  <div class="7">7</div>
  <div class="8">8</div>
  <div class="9">9</div>
  <div class="10">10</div>
  <div class="11">11</div>
  <div class="12">12</div>
  <div class="13">13</div>
  <div class="14">14</div>
  <div class="15">15</div>
</div>

Archit Gargi · Answer 3 · 2022-05-02T12:00:59.290

0

The below code will work. It will create the div with class "test1" and append the 2 divs to it.

var divHolder = document.getElementsByClassName("test")[0];
var divs = divHolder.getElementsByTagName("div");
var test1 = document.createElement('div');
divHolder.appendChild(test1);
test1.className = "test1";
test1.appendChild(divs[1]);
test1.appendChild(divs[1]);
divHolder.appendChild(divs[1]);

<div class="test">
  <div class="1">1</div>
  <div class="2">2</div>
  <div class="3">3</div>
  <div class="4">4</div>
</div>

edited May 02 '22 at 12:00

answered May 02 '22 at 11:27

Archit Gargi

634
1
8
24

1

Please note that the order is not correct – Carsten Løvbo Andersen May 02 '22 at 11:30
@CarstenLøvboAndersen What order? – Archit Gargi May 02 '22 at 11:35
1

If you look at the "wanted" solution, op want it in 1,2,3,4 order of the divs. your code does 1,4,2,3 – Carsten Løvbo Andersen May 02 '22 at 11:58
@CarstenLøvboAndersen Oh ok thanks I will update the answer to match the requirement. – Archit Gargi May 02 '22 at 12:00

score 0 · Answer 4 · edited May 02 '22 at 13:18

Try with below jquery,

$(document).ready(function() {
  $(".2").before("<div class='test1'>" + $(".2")[0].outerHTML + "" + $(".3")[0].outerHTML + "</div>");
  $(".2, .3").each(function() {
    if (!$(this).parent().hasClass("test1")) {
      $(this).remove();
    }
  })
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="test">
  <div class="1">1</div>
  <div class="2">2</div>
  <div class="3">3</div>
  <div class="4">4</div>
</div>

How to create a Parent div for selected multiple child?

4 Answers4