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

时间：2017-01-25 23:43:54

标签： jquery

我在页脚中使用它：

<script type="text/javascript">
    jQuery( document ).ready(function() {
        jQuery(".entry-meta").prepend(jQuery( ".posted-on" ));
        jQuery(".entry-meta").insertAfter(".entry-content");
    });
</script>

应该用文章重新安排一些元素，例如：发布日期，作者，标签和评论数量低于文章内容，而不是高于文章内容。

问题是，在他们不止一篇文章的页面上（例如：博客卷），它会将所有数据（作者/标签等）插入/预先添加到每篇文章中，而不是在每篇文章中，相乘数据。

例如，假设有两篇文章。期望的结果是在第一篇文章内容下面的第一篇文章中移动发布日期，作者，标签和评论计数，对于第二篇文章也是如此。 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-*']）移动数据，但没有占上风。

2 个答案:

答案 0 :(得分：0)

您应首先找到每个.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
});

答案 1 :(得分：0)

由于存在混乱，我假设OP无法控制网站，因为它是一个千篇一律（杂乱？）博客/ CMS模板布局。因此，使用所提供的内容而不是改变除jQuery之外的任何内容，这就是我所做的：

  
      
  1. 通过使用style="color:red"或style="color:blue"引用标记来对内容进行排序.✎
    2.   
  2. 接下来，我们将.addClass('blue')和.addClass('red')用于相应的selectors.✎
    3.   
  3. 更改实际父母$('.meta-entry')和$('#post-239)的目标元素$('#post-84')。
    4.   
  4. 删除了.prepend()方法，并在其中添加了.insertBefore()方法。
    5.   
  5. 同时将insert*方法链接在一起。
    6.   

<强>段

＆＃13;
＆＃13; 
$(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");
});
＆＃13; 
.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;
}
＆＃13; 
<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>
＆＃13;
＆＃13;
＆＃13;

<强> FIDDLE

＆＃13;
＆＃13; 
<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>
＆＃13;
＆＃13;
＆＃13;

  

✎注意：他们的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

上的这篇文章
相关问题
最新问题