Question

我有一个标记<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>

我有第n段，并希望将它们分成2部分，以便在<div>标记中对它们进行不同的设置。我怎样才能做到这一点例如：

<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>

Answer 1

您可以使用slice和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' />"));

Answer 2

您可以尝试以下内容

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

Answer 3

尝试使用:lt()，:not()

＆＃13;

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)"));

＆＃13;

<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>

＆＃13;

Answer 4

如果你做了很多事情，那么这是一个更高级的方法，它添加了一个名为makeGroups()的jQuery函数。

演示：JSnippet

插件：

$.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;
};

<强>用法：

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

定义和行为：

采用两个参数n, c第一个参数表示您想要多少个组。第二个是类名数组，它将被添加到每个组中。

n默认为1;
c是可选的，如果没有设置，则不会添加任何类。
如果c小于组的数量，则最后一个类将用于未定义的类名。
如果元素没有与组数完全分开，那么如果余数大于组大小，则组大小将被扩展 - 否则最后一组将被扩展并包括余数。

如何使用js / jquery拆分<p>列表？

4 个答案: