jQuery appendTo Polymerの修正として他の要素を移動すると意図せずに他の要素が追加される

Question

編集：私は、移動しようとしているものと同じクラス名を持つ紙の要素を認識しました。私はIDを移動して代わりにそれを移動しようとしているdivを与えるつもりです。今すぐ中断しますが、私が戻って結果を更新するときに試してみます。

私はPolymer 1.0を使用しています。ページが読み込まれると、Chromeブラウザは要素を正しく並べ替えません。他のブラウザは正常に動作します。

ここでは、Chromeのhtmlの短いバージョンです。 "content"クラスdivは、 "mainContainer"というIDを持つdiv内にあるはずです。修正として

<paper-scroll-header-panel fixed="" class="x-scope paper-scroll-header-panel-0"> 
<div id="mainContainer" class="style-scope paper-scroll-header-panel" style="top: 0px;"></div> 
<div id="headerContainer" class="style-scope paper-scroll-header-panel" style="transform: translate3d(0px, 0px, 0px);"></div> 
<paper-toolbar role="toolbar" class="x-scope paper-toolbar-0"></div> 
<div class="content"></div> 
</paper-scroll-header-panel> 

、私は「mainContainer」に「コンテンツ」を移動するためにjQueryのappendToメソッドを使用することにしました：

document.addEventListener('WebComponentsReady', function(){ 
    var content = $(".content").detach(); 
    content.appendTo("#mainContainer"); 
} 

はしかし、そうした後、それが存在し、追加の紙材料の要素を移動させ私の論文のスクロールヘッダーパネルの外にある "mainContainer"に。

<div id="mainContainer" class="style-scope paper-scroll-header-panel" style="top: 0px;"> 
<script src="headerBarJS.php" type="text/javascript"></script> 
<paper-material animated="" class="content style-scope paper-button x-scope paper-material-0" elevation="0"></paper-material> 
<paper-material animated="" class="content style-scope paper-button x-scope paper-material-0" elevation="0"></paper-material> 
<paper-material animated="" class="content style-scope paper-button x-scope paper-material-0" elevation="0"></paper-material> 
<div class="content"></div> 
<paper-material animated="" class="content style-scope paper-button x-scope paper-material-0" elevation="0"></paper-material><paper-material animated="" class="content style-scope paper-button x-scope paper-material-0" elevation="0"></paper-material> 
</div> 

何が起こるのでしょうか、それをどうすれば防止できますか？ appendを使った後に呼び出される何らかのリスナーですか？

インスペクタに入り、mainContainer要素にコンテンツ要素をドラッグすると、ページが正常に動作します。だから何か追加がappendToで起こっています。追加チェックとして、3秒後にappendToメソッドを呼び出した関数を呼び出すためにsetTimeoutを使用して、ページのロード後に呼び出されたメソッドと何か関係があるかどうかを確認しました。

Answer 1

問題は紙の要素が私が移動しようとしているdivと同じクラス名を持っていることでした。私は同じクラス名でdivを参照しているので、それもそれらをもたらすでしょう。簡単な解決策は、divにIDを割り当て、IDを参照してdetachを使用することでした。