如何在检测到文本更改时将子div移到顶部

Question

我有一个包含3个子div的父div。如果在其文本或链接中检测到任何更改，是否可以将子div移到顶部？

<div id="latest">
  <div class="post post-1"><a href="#">Post 1</a></div>
  <div class="post post-2"><a href="#">Post 2</a></div>
  <div class="post post-3"><a href="#">Post 3</a></div>
</div>

这就是我到目前为止所拥有的，但还没有实现：

$(document).on("DOMSubtreeModified", ".post a", function (){
  $(this).parent().prependTo(this);
});

Answer 1

你可以检查变异观察者，如果他们为你工作的话。DOMSubtreeModified和其他突变事件是deprecated。

MutationObserver WEB API

DOM MutationObserver – reacting to DOM changes without killing browser performance

在找到的事件中，您可以克隆您的组件并将其添加到页面上的其他位置。

$( "b" ).clone().prependTo( "p" )

Answer 2

您的代码中有一个错误：

$(this).parent().prependTo(this);

它应该是(可能的变化越少)：

$(this).parent().prependTo($(this).parent().parent());

因为您希望将.post预置为#latest，而不是它的子级(this)。

working fiddle here