javascript - How to move every 4 elements to another container with jQuery? -
so have markup:
<section class="oldcontainer"> <article></article> <article></article> <article></article> <article></article> <article></article> <article></article> </section> <section class="newcontainer"></section> <section class="newcontainer"></section>
and i'd move <article>'s
oldcontainer
newcontainer
, newcontainer
can have no more 4 <article>'s
each. how can done jquery? know how wrap elements in situation, not move them :)
if newcontainer elements present then, move them
var $as = $('.oldcontainer article'); $('.newcontainer').each(function(i) { $(this).append($as.slice(i * 4, (i + 1) * 4)) });
.oldcontainer { min-height: 5px; border: 1px solid red; margin-bottom: 5px; } .newcontainer { min-height: 5px; border: 1px solid green; margin-bottom: 5px; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <section class="oldcontainer"> <article>1</article> <article>2</article> <article>3</article> <article>4</article> <article>5</article> <article>6</article> </section> <section class="newcontainer"></section> <section class="newcontainer"></section>
Comments
Post a Comment