保持insertAfter元素，在它自己的父元素

Question

我在页脚使用此：

它应该重新安排与项目的一些元素，如：日发表，作者，标签，评论数量低于文章内容，而不是上面。

问题是，在他们多于一篇文章的页面上（例如：Blog Roll），它会将所有数据（作者/标签等）插入到每篇文章中，而不是每篇文章中，乘以数据。

例如，假设有两篇文章。期望的结果是将第一篇文章内的第一篇文章中的发布日期，作者，标记和评论数移至第二篇文章的相同内容。 jQuery脚本正在这样做，但它也将第一篇文章数据添加到第二篇文章中，反之亦然。

我该如何使它只在它自己的文章中预先插入/插入？

这是问题的一个小提琴：https://jsfiddle.net/gb14ugja/

香草HTML：

<article id="post-239" class="hentry"> 
    <span class="posted-on" style="color:blue">Date Published: 1/25/2017,</span> 
    <div class="some-title"> 
    Blue Article 
    </div> 
    <div class="entry-meta" style="color:blue"> 
    <span>Article One Author,</span> 
    <span>Article One Tags,</span> 
    <span>Article One Comment Count.</span> 
    </div> 
    <p class="entry-content">This is the Blue Article, the red articles content should not be here!</p> 
</article> 

<hr/> 

<article id="post-84" class="hentry"> 
    <span class="posted-on" style="color:red">Date Published: 1/28/2017,</span> 
    <div class="some-title"> 
    Red Article 
    </div> 
    <div class="entry-meta" style="color:red"> 
    <span>Article Two Author,</span> 
    <span>Article Two Tags,</span> 
    <span>Article Two Comment Count.</span> 
    </div> 
    <p class="entry-content">This is the Red Article, the blue articles content should not be here!</p> 
</article> 

不希望HTML结果：

<article id="post-239" class="hentry"> 
    <div class="some-title"> 
    Blue Article 
    </div> 
    <p class="entry-content">This is the Blue Article, the red articles content should not be here!</p> 
    <div class="entry-meta" style="color:blue"><span class="posted-on" style="color:blue">Date Published: 1/25/2017,</span><span class="posted-on" style="color:red">Date Published: 1/28/2017,</span> 
    <span>Article One Author,</span> 
    <span>Article One Tags,</span> 
    <span>Article One Comment Count.</span> 
    </div> 
    <div class="entry-meta" style="color:red"><span class="posted-on" style="color:blue">Date Published: 1/25/2017,</span><span class="posted-on" style="color:red">Date Published: 1/28/2017,</span> 
    <span>Article Two Author,</span> 
    <span>Article Two Tags,</span> 
    <span>Article Two Comment Count.</span> 
    </div> 
</article> 

<hr> 

<article id="post-84" class="hentry"> 
    <div class="some-title"> 
    Red Article 
    </div> 
    <p class="entry-content">This is the Red Article, the blue articles content should not be here!</p> 
    <div class="entry-meta" style="color:blue"><span class="posted-on" style="color:blue">Date Published: 1/25/2017,</span><span class="posted-on" style="color:red">Date Published: 1/28/2017,</span> 
    <span>Article One Author,</span> 
    <span>Article One Tags,</span> 
    <span>Article One Comment Count.</span> 
    </div> 
    <div class="entry-meta" style="color:red"><span class="posted-on" style="color:blue">Date Published: 1/25/2017,</span><span class="posted-on" style="color:red">Date Published: 1/28/2017,</span> 
    <span>Article Two Author,</span> 
    <span>Article Two Tags,</span> 
    <span>Article Two Comment Count.</span> 
    </div> 
</article> 

所需的HTML结果：

<article id="post-239" class="hentry"> 
    <div class="some-title"> 
    Blue Article 
    </div> 
    <p class="entry-content">This is the Blue Article, the red articles content should not be here!</p> 
    <span class="posted-on" style="color:blue">Date Published: 1/25/2017,</span> 
    <div class="entry-meta" style="color:blue"> 
    <span>Article One Author,</span> 
    <span>Article One Tags,</span> 
    <span>Article One Comment Count.</span> 
    </div> 
</article> 

<hr/> 

<article id="post-84" class="hentry"> 
    <div class="some-title"> 
    Red Article 
    </div> 
    <p class="entry-content">This is the Red Article, the blue articles content should not be here!</p> 
    <span class="posted-on" style="color:red">Date Published: 1/28/2017,</span> 
    <div class="entry-meta" style="color:red"> 
    <span>Article Two Author,</span> 
    <span>Article Two Tags,</span> 
    <span>Article Two Comment Count.</span> 
    </div> 
</article> 

编辑：我用更多的数据修改了这个问题，因为有些人很难理解我遇到的问题。我所包括的小提琴也进行了大修，跳起来会更明显，因为问题在于。

此外，每篇文章都分配了一个带有随机数的ID。我试图移动每个文章ID（article[id^='post-*']）的数据，但没有占上风。

Answer 1

而不是选择每.entry-meta，你应该首先找到每个.hentry，然后与其后代工作。像

jQuery(".hentry").each(function() { 
    var entryMeta=jQuery(this).find(".entry-meta"); 
    var postedOn=jQuery(this).find(".posted-on"); 
    var entryContent=jQuery(this).find(".entry-content"); 
    //...do whatever you need with them 
}); 

Answer 2

与在乱七八糟的东西，我假设OP拥有该网站没有控制，因为它是一个千篇一律的（混乱？）博客/ CMS模板布局。那么什么是给予，而不是改变什么，但jQuery的工作，这就是我所做的：

1. 搜索结果排序的内容与任何style="color:red"或style="color:blue".✎
2. 接下来，我们使用.addClass('blue')和引用标签.addClass('red')到适当的选择器。
3. 更改目标元素$('.meta-entry')实际的父母$('#post-239)和$('#post-84')。
4. 删除了.prepend()方法并在其位置添加了.insertBefore()方法。
5. 将insert*方法连接在一起。

SNIPPET

$(document).ready(function() { 
 

 
    // Classify content by the color 
 
    $('[style="red"]').addClass('red'); 
 
    $('[style="blue"]').addClass('blue'); 
 

 
    // Chain methods for readability and performance 
 
    // Used .insertBefore insted of .prepend() 
 
    $("#post-84").insertBefore(".posted-on.red").insertAfter(".entry-content.red"); 
 

 
    // As above 
 
    $("#post-239").insertBefore(".posted-on.blue").insertAfter(".entry-content.blue"); 
 
});

.entry-meta { 
 
    display: inline; 
 
} 
 
.some-title { 
 
    font-weight: bold; 
 
    text-transform: uppercase, 
 
} 
 
hr { 
 
    margin: 16px 0; 
 
    border-style: dashed; 
 
} 
 
span { 
 
    margin-right: 6px; 
 
} 
 
article:first-of-type .some-title { 
 
    color: blue; 
 
} 
 
article:nth-of-type(2) .some-title { 
 
    color: red; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> 
 
<article id="post-239" class="hentry"> 
 
    <span class="posted-on" style="color:blue">Date Published: 1/25/2017,</span> 
 
    <div class="some-title"> 
 
    Blue Article 
 
    </div> 
 
    <div class="entry-meta" style="color:blue"> 
 
    <span>Article One Author,</span> 
 
    <span>Article One Tags,</span> 
 
    <span>Article One Comment Count.</span> 
 
    </div> 
 
    <p class="entry-content">This is the Blue Article, the red articles content should not be here!</p> 
 
</article> 
 

 
<hr/> 
 

 
<article id="post-84" class="hentry"> 
 
    <span class="posted-on" style="color:red">Date Published: 1/28/2017,</span> 
 
    <div class="some-title"> 
 
    Red Article 
 
    </div> 
 
    <div class="entry-meta" style="color:red"> 
 
    <span>Article Two Author,</span> 
 
    <span>Article Two Tags,</span> 
 
    <span>Article Two Comment Count.</span> 
 
    </div> 
 
    <p class="entry-content">This is the Red Article, the blue articles content should not be here!</p> 
 
</article>

FIDDLE

<iframe width="100%" height="300" src="//jsfiddle.net/zer00ne/pcqm0u2t/embedded/js,html,css,result/dark/?fontColor=FF9900&accentColor=FFCC00&bodyColor=141414&menuColor=010101" allowfullscreen="allowfullscreen" frameborder="0"></iframe>

✎注：相比小提琴由他们style属性引用的选择（jQuery的对象）都在不同的片段。

小提琴

$('["red"]') and $('["blue"]') 

片段

$('[style="red"]') and $('[style="red"]') 

这些选择目标元素的属性<div风格>与方括号[]。如果以不同的方式给出，则会记录错误，有时只有一半的文本未呈现。这必须是一个bug，所以不要指望这些属性选择器在第一次尝试时是100％。这通常是选择应该是什么样子：

$('[style="color:red"]') and $('[style="color:blue"]') 

阅读这篇文章上CSS/jQuery (.querySelector() and .querySelectorAll() work like this as well) selectors