<div class="test"> <div class="1"></div> <div class="2"></div> <div class="3"></div> <div class="4"></div> </div>* Quiero agregar div principal solo para las clases 2 y 3. Me gusta el código a continuación
<div class="test"> <div class="1"></div> <div class="test1"> <div class="2"></div> <div class="3"></div> </div> <div class="4"></div> </div>Para hacer lo que quieras puedes usar .wrapAll()
$('.test .2, .test .3').wrapAll("<div class='test1'></div>")Manifestación
$('.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>Puedes usar esta función js pura para hacerlo
Agregué el código css para mostrar el resultado, puede descartarlo :)
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>El siguiente código funcionará. Creará el div con la clase "test1" y le agregará los 2 divs.
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>