Question

我目前正在使用基于WordPress的网站。我想用jQuery来移动博客文章的日期。我无法编辑模板，因为它在其他页面上使用。

准确地说，我想在.entry-title

下移动.entry-time元素

这里是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");
    });

元素＆＃34; .entry-time＆＃34;是在正确的地方，但我的循环有问题。这三个日期显示在每个博客标题下：

http://i.stack.imgur.com/FCA8G.png

你能帮我解决这个问题吗？

谢谢，达明

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

jQuery - 选择相同的元素并将它们移动到自己的父母中

2 个答案: