jQuery - выберите те же элементы и переместите их в своих родителей

Question

В настоящее время я работаю над сайтом на основе WordPress. Я хотел бы использовать jQuery для перемещения даты сообщений в блоге. Я не могу редактировать шаблон, потому что он используется на других страницах.

Точно, я хотел бы переместить элемент.entry-time в.entry-title

Вот код HTML:

<div class="post-content-container">
    <h2 class="entry-title">Blog 1</h2>
    <div class="entry-meta">
        <p class="entry-meta-details">
            <span class="entry-time">
                <span class="updated" style="display:none;">2014-06-24T13:58:52+00:00</span>
                <time class="published">June 24th, 2014</time>
            </span>
        </p>
</div>
<div class="post-content-container">
    <h2 class="entry-title">Blog 2</h2>
    <div class="entry-meta">
        <p class="entry-meta-details">
            <span class="entry-time">
                <span class="updated" style="display:none;">2014-06-20T13:58:52+00:00</span>
                <time class="published">June 20th, 2014</time>
            </span>
        </p>
</div>
<div class="post-content-container">
    <h2 class="entry-title">Blog 3</h2>
    <div class="entry-meta">
        <p class="entry-meta-details">
            <span class="entry-time">
                <span class="updated" style="display:none;">2014-05-20T13:58:52+00:00</span>
                <time class="published">May 20th, 2014</time>
            </span>
        </p>
</div>

И вот что я сделал до сих пор, используя jQuery:

jQuery(".post-content-container").find(".entry-time").each(function(){
            jQuery(this).appendTo(".entry-title");
    });

Элемент ".entry-time" находится в нужном месте, но с моим циклом что-то не так. Три даты отображаются под каждым заголовком блога:

Не могли бы вы помочь мне исправить петлю?

Спасибо Дэмиен

Answer 1

Это потому, что ваш селектор в .appendTo(".entry-title") соответствует всем трем заголовкам каждый раз. То, что вы хотите, чтобы соответствовать только соответствующий заголовок для каждого конкретного .entry-time, Для этого одним из способов является перемещение DOM к правильной цели, например, одним из способов является:

jQuery(".post-content-container").find(".entry-time").each(function(){
    var $this = jQuery(this);
    $this.appendTo($this.closest(".post-content-container").find(".entry-title"));
});

Конечно, когда вы смотрите на это потом, он предлагает потянуть .each вверх, чтобы не приходилось обходить DOM несколько раз для одного и того же элемента:

jQuery(".post-content-container").each(function() {
    var $this = jQuery(this);
    $this.find(".entry-time").appendTo($this.find(".entry-title"));
});

И мне действительно нравится эта усовершенствованная версия гораздо лучше: тело обратного вызова читается очень близко к естественному языку.

Answer 2

Вы не выбираете конкретный .entry-title соответствует текущему пункту.

jQuery(".post-content-container").find(".entry-time").each(function(){
    jQuery(this).appendTo($(this).closest(".entry-meta").prev(".entry-title"));
});