jQuery - 在特定元素之间插入div

Question

HTML:

<div class="row">
   <div class="A"></div>
   <div class="B"></div>
   <div class="C"></div>
   <div class="D"></div>
</div>
<div class="row">
   <div class="A"></div>
   <div class="B"></div>
   <div class="C"></div>
   <div class="D"></div>
</div>

What I want to achieve:

<div class="row">
   <div class="newDiv">
      <div class="A"></div>
      <div class="B"></div>
      <div class="C"></div>
   </div>
   <div class="D"></div>
</div>
<div class="row">
   <div class="newDiv">
      <div class="A"></div>
      <div class="B"></div>
      <div class="C"></div>
   </div>
   <div class="D"></div>
</div>

I tried the next code, Include all in one, ok, but I can not take D out without duplicating content.

jQuery('.row').wrapInner('<div class="newDiv"></div>');

And it is impossible to add HTML without tags close alone.

jQuery('.A').before('<div class="newDiv">')
jQuery('.D').before('</div>')

Answer 1

You can

1) iterate over each row

2) get all div element

3) select first three using .slice(0,3)

4) wrap using .wrapAll() :

$('.row').each(function(){
   $(this).find("div").slice(0,3).wrapAll("<div class='newDiv'></div>");
});

Working Demo

Answer 2

Use your code on each div using .each() like:

$(document).ready(function(){

  $("div[class^=row]").each(function(){
    $(this).wrapInner('<div class="newDiv"></div>');
    $(this).find(".A").before('<div class="conteneur-produit">')
    $(jQuery(this).find(".D")).insertAfter($(this).find('.newDiv'))
  });
});

SEE DEMO

Answer 3

Here is demo: https://jsfiddle.net/7a60jz07/

$('.row').each(function(){
    var newdiv = $('<div class="newDiv">');   

    var lastdiv = $(this).children().last();

    $(this).append(newdiv);
    newdiv.append($(this).children());
    newdiv.after(lastdiv);
})

Answer 4

the simplest way I can think would be to do

$('[class^="row"]').prepend('<div class="newDiv">');
$('[class^="row"]').children().last().before('</div>');