Question

在Wordpress中，我希望复制每个Wordpress帖子的标题，并将其放在最近的文章下面（默认情况下，它只显示在上面）。

此代码几乎可以使用，但它会从顶部删除标题而不是克隆它：

$("h2.entry-title").each(function() {
  $(this).closest("article.post").append(this);
});

无论如何克隆（这个）并附加副本而不删除原始文件？

Answer 1

克隆元素有一个clone函数：

$("h2.entry-title").each(function() {
  var $this = $(this);
  $this.closest("article.post").append($this.clone());
});

Answer 2

通常在WordPress中，.entry-title标题标记是其对应的article.post的子标记，因此您可以使用以下代码编写javascript代码：

JS Fiddle 1

＆＃13;

$('h2.entry-title').each(function() {
  $(this).parents('article.post').append($(this).clone());
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<article class="post">
  <h2 class="entry-title">FIRST test header</h2>
  Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsam omnis ullam non dolores dolore placeat eligendi nulla id et deserunt consectetur adipisci natus vel nisi vero, perferendis, nihil veritatis odit.
</article>
<hr>
<article class="post">
  <h2 class="entry-title">SECOND test header</h2>
  Ipsam omnis ullam non dolores dolore placeat eligendi nulla id et deserunt consectetur adipisci natus vel nisi vero, perferendis, nihil veritatis odit.
</article>

＆＃13;

或者，因为.closest()对我无效，无论我如何尝试使用，即使.entry-title，下面的内容也会很有效超出其各自的article.post但有一个例外^（*）。

JS Fiddle 2

＆＃13;

var clones = $('h2.entry-title'),
  articles = $('article.post');

clones.each(function(i) {
  $(articles[i]).append($(this).clone());
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<article class="post">
  <h2 class="entry-title">FIRST test header</h2>
  Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsam omnis ullam non dolores dolore placeat eligendi nulla id et deserunt consectetur adipisci natus vel nisi vero, perferendis, nihil veritatis odit.
</article>
<hr>
<!-- Note that this header is outside its corresponding article -->
<h2 class="entry-title">SECOND test header</h2>
<article class="post">
  Ipsam omnis ullam non dolores dolore placeat eligendi nulla id et deserunt consectetur adipisci natus vel nisi vero, perferendis, nihil veritatis odit.
</article>

＆＃13;

^（*） - 如果h2.entry-title 在之外，则article.post标题标记的顺序为.entry-title相对于DOM上的其他标题标记必须 与该.post文章到DOM中其他文章的顺序相同。

例如：在拥有第二个h2.entry-title 的情况下，您无法在第一个h2.entry-title之前获得第二个article.post 在第一个article.post标记之后。

在最近的文章后克隆并追加div

2 个答案: