How to create a Parent div for selected multiple child?-CodePudding

<div >
 <div ></div>
 <div ></div>
 <div ></div>
 <div ></div>
</div>

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

<div >
 <div ></div>
     <div >
        <div ></div>
        <div ></div>
      </div>
 <div ></div>
</div>

Through Javascript or Jquery!*

CodePudding user response：

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 >
  <div >1</div>
  <div >2</div>
  <div >3</div>
  <div >4</div>
</div>

CodePudding user response：

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 >
  <div >1</div>
  <div >2</div>
  <div >3</div>
  <div >4</div>
  <div >5</div>
  <div >6</div>
  <div >7</div>
  <div >8</div>
  <div >9</div>
  <div >10</div>
  <div >11</div>
  <div >12</div>
  <div >13</div>
  <div >14</div>
  <div >15</div>
</div>

CodePudding user response：

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 >
  <div >1</div>
  <div >2</div>
  <div >3</div>
  <div >4</div>
</div>

CodePudding user response：

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 >
  <div >1</div>
  <div >2</div>
  <div >3</div>
  <div >4</div>
</div>