Clever Geek Handbook

JQuery - insert div between specific elements

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 following code: Include everything in one, ok, but I can't take D outside of the duplicate content.

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

And it is not possible to add HTML without tags close together.

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


source to share


4 answers


You can

1) iterating over each line

2) get all div elements

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



4) using .wrapAll()

:

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

Working demo

+7


source


Use your code for each div with .each()

for example:

$(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'))
  });
});


WATCH DEMO

+1


source


Here's a 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);
})
+1


source


The easiest way I can think of is to do

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


source






More articles:


All Articles