Использование jQuery для вставки <div>после соседних <div>

Question

Допустим, у меня есть набор простых элементов HTML следующим образом:

<div class="metadata">I'm metadata #1</div>
<div class="content">Hello, world!</div>

<p />

<div class="metadata">I'm metadata #2</div>
<div class="content">Hello, world!</div>

Моя цель - вставить каждый div.metadata сразу после соседнего div.content, Очевидно, я могу попробовать: $("div.metadata").insertAfter("div.content"); но при этом (как и ожидалось) добавляет ОБА div.metadata элементы к каждому div.content как показано в этой демонстрации.

Вы можете подумать, что назначение уникального идентификатора каждому элементу div сделало бы все просто, но 1) эти теги динамически генерируются CMS, и я бы хотел избежать ручного назначения идентификаторов, и 2) могут быть десятки одинаковых пар элементов,

Итак, вопрос в том, какой самый эффективный способ вставить после или добавить каждый div.metadata к соседнему div.content?

Answer 1

$('.content').after(function() {
    return $(this).prev('.metadata');
});

FIDDLE

Answer 2

$('div.content').each(function(i) {
    $(this).prev('.metadata').insertAfter($(this));
})

http://jsfiddle.net/jwhitfieldseed/h7VZd/