如果检测到文本的变化，如何将子div移动到顶部

Question

我有一个父div，它包含3个子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的＃最新的，而不是它的孩子（这个）。

working fiddle here