How can I split a list of
using js/jquery?

Question

I have a list of tag <p>

<p>Paragraph 1</p>
<p>Paragraph 2</p>
<p>Paragraph 3</p>
<p>Paragraph 4</p>
<p>Paragraph 5</p>
<p>Paragraph 6</p>
<p>Paragraph 7</p>
<p>Paragraph 8</p>
<p>Paragraph 9</p>
<p>Paragraph 10</p>
<p>Paragraph 11</p>
<p>Paragraph 12</p>
<p>Paragraph 13</p>

I have nth paragraph, and want to divide them into 2 part in order to style them differently in <div> tag. How can I do that e.g:

<div class="Top">
<p>Paragraph 1</p>
<p>Paragraph 2</p>
<p>Paragraph 3</p>
<p>Paragraph 4</p>
<p>Paragraph 5</p>
<p>Paragraph 6</p>
</div>
<div class="Bottom">
<p>Paragraph 7</p>
<p>Paragraph 8</p>
<p>Paragraph 9</p>
<p>Paragraph 10</p>
<p>Paragraph 11</p>
<p>Paragraph 12</p>
<p>Paragraph 13</p>
</div>

I do not have a clear direction. Don't know where can I start — tangkhanhphu, Jan 05 '16 at 19:41
http://stackoverflow.com/questions/11376256/jquery-wrap-every-x-elements-in-div — epascarello, Jan 05 '16 at 19:41
@Rory Crossan it's not a duplicate, the OP is trying to group by division and not in a each x element. Also the suggested duplicate question is about "between" elements - Should be reopened. — Shlomi Hassid, Jan 05 '16 at 20:52

score 2 · Answer 1 · edited Jan 05 '16 at 19:48

2

You can use a combination of slice and wrapAll

var $els = $("p");
var len = $els.length;

$els.slice(0, len / 2).wrapAll($("<div class='top' />"));
$els.slice(len / 2, len).wrapAll($("<div class='bottom' />"));

edited Jan 05 '16 at 19:48

Blazemonger

90,923
26
142
180

answered Jan 05 '16 at 19:41

Andrew Brooke

12,073
8
39
55

score 2 · Answer 2 · answered Jan 05 '16 at 19:44

2

You can try something like following

var length = $('p').length;
$('p').slice(0,length/2).wrapAll("<div class='Top'></div>");
$('p').slice(length/2,length).wrapAll("<div class='Bottom'></div>");

answered Jan 05 '16 at 19:44

Nikhil Aggarwal

28,197
4
43
59

score 0 · Answer 3 · answered Jan 05 '16 at 19:53

Try using :lt() , :not()

var p = $("p"), len = p.length;

$("body").prepend("<div class=Top></div><div class=Bottom></div>");

$(".Top").append($("p:lt("+ Math.floor(len / 2) +")"));
$(".Bottom").append($("p:not(.Top > p)"));

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js">
</script>
<p>Paragraph 1</p>
<p>Paragraph 2</p>
<p>Paragraph 3</p>
<p>Paragraph 4</p>
<p>Paragraph 5</p>
<p>Paragraph 6</p>
<p>Paragraph 7</p>
<p>Paragraph 8</p>
<p>Paragraph 9</p>
<p>Paragraph 10</p>
<p>Paragraph 11</p>
<p>Paragraph 12</p>
<p>Paragraph 13</p>

score 0 · Answer 4 · answered Jan 05 '16 at 20:43

If it's something you do a lot here is a more advanced approach which add a jQuery function called makeGroups().

Demo: JSnippet

The Plugin:

$.fn.makeGroups = function(n,c) {
    c = c || [];
    n = n > 0 ? n : 1;
    len = this.length;
    l = Math.floor(len / n);
    l += (len - l * n > l)?1:0;
    pc = "", p = 0, t = l;
    for(var i = 0; i < n; i++) {
        t += (len - l < t)?len - l:0;
        gclass = (typeof c[i] != 'undefined')?c[i]:pc;
        this.slice(p,t).wrapAll("<div class='" + gclass + "'></div>");
        p = t, t = l + p, pc = gclass;
        if (t > len) break;
    }
    return this;
};

Usage:

$('body p').makeGroups(2,["Top","Bottom"]);

Definition and Behavior:

Takes two arguments n, c the first argument indicates how many groups you want. The second is a class name array which will be added to each group.

n default is 1;
c is optional and if not set no class will be added.
If c is smaller than the number of groups the last class will be used for the undefined class names.
If the elements don't divide exactly with the number of groups then if the remainder is bigger than the group size the group size will be extended - otherwise the last group will be extended and will include the remainder.

How can I split a list of using js/jquery?

4 Answers4

How can I split a list of
using js/jquery?