Объединить элементы, используя 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> поддержанию порядка на каждой data-publisheddate каждого <article>.

Другими словами, возьмите 5 <article> элементы из нижней <div> и вставить их внутри верхней <div> после 10 <article> элементов. После этого полностью снимите нижнюю часть <div>.

Псевдокод меня заключается в следующем:

1. Найти соответствие <div> сек, глядя на атрибут data-groupdate.
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(); 

Here is the working fiddle.

Очевидно, что это работает только с дивизиями 2 'date'. Если вы хотите расширить это вообще, вы, скорее всего, захотите добавить идентификаторы или выполнить итерацию через каждые $ ('. Date') и не использовать first() и last().

обновляется, так что на самом деле удаляет DIV теперь вместо всего содержимого