使用 jquery 合并元素

Question

我有以下html：

<div class="date" data-groupdate="2014-02-03T05:00:00.0000000Z">
    <article data-publisheddate="2014-02-03T19:09:00.0000000Z" data-istop="False"/>
    <article data-publisheddate="2014-02-03T19:08:00.0000000Z" data-istop="False"/>
    <article data-publisheddate="2014-02-03T19:07:00.0000000Z" data-istop="False"/>
    <article data-publisheddate="2014-02-03T19:06:00.0000000Z" data-istop="False"/>
    <article data-publisheddate="2014-02-03T19:05:00.0000000Z" data-istop="False"/>
    <article data-publisheddate="2014-02-03T19:04:00.0000000Z" data-istop="False"/>
    <article data-publisheddate="2014-02-03T19:03:00.0000000Z" data-istop="False"/>
    <article data-publisheddate="2014-02-03T19:02:00.0000000Z" data-istop="False"/>
    <article data-publisheddate="2014-02-03T19:01:00.0000000Z" data-istop="False"/>
    <article data-publisheddate="2014-02-03T19:00:00.0000000Z" data-istop="False"/>
</div>
<div class="date" data-groupdate="2014-02-03T05:00:00.0000000Z">
    <article data-publisheddate="2014-02-03T18:54:00.0000000Z" data-istop="False"/>
    <article data-publisheddate="2014-02-03T18:53:00.0000000Z" data-istop="False"/>
    <article data-publisheddate="2014-02-03T18:52:00.0000000Z" data-istop="False"/>
    <article data-publisheddate="2014-02-03T18:51:00.0000000Z" data-istop="False"/>
    <article data-publisheddate="2014-02-03T18:50:00.0000000Z" data-istop="False"/>
</div>

我希望将两个<div>合并为一个<div>保持每个<article>的每个data-publisheddate的顺序。

换句话说，从下部<div>中取出 5 个<article>元素，并将它们插入上部<div> 10 个<article>元素之后。完成后，完全取下底部<div> .

我拥有的伪代码如下：

1. 通过查看data-groupdate属性来查找匹配的<div>。
2. 使用匹配的<div> s，删除所有元素。
3. 将删除的<article>元素附加到第一个找到的元素
4. 清理并删除现在为空的<div>元素。

有人会如何解决这个问题？谢谢

Answer 1

这应该有效，但我认为<文章>不能自我关闭。 我遇到了问题。 添加闭包后，这有效：

var firstDiv = $('.date').first();
var lastDiv = $('.date').last();
lastDiv.children().each(function() {
    var thisArticle = $(this);
    firstDiv.append(thisArticle);
});
lastDiv.remove();

这是工作小提琴。

显然，这仅适用于 2 个"日期"div。 如果你想扩展它，你可能想要添加 ID 或遍历每个 $（'.date'），并避免使用 first（） 和 last（）。

已更新，因此它实际上现在删除了div，而不仅仅是内容