Question

编辑：我刚刚意识到那些纸质素材与我想要移动的那些具有相同的类名。我要给div我试图移动一个ID并用它移动它。现在休息，但是当我回来并用结果更新时会尝试。

我正在使用Polymer 1.0，Chrome浏览器在加载页面时不正确地重新排序元素。其他浏览器工作正常。

这是我在Chrome中的html的速记版本。 “content”类div应该位于id为“mainContainer”的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>

作为修复，我决定使用jQuery的appendTo方法将“content”移动到“mainContainer”中：

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

然而，在这样做之后，它将存在于paper-scroll-header-panel之外的其他纸质素材元素移动到“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>

什么会导致这种情况发生，我该如何防止它？是否使用追加后调用某种监听器？

如果我进入检查器，并将内容元素拖到mainContainer元素中，页面工作正常。所以appendTo正在发生一些额外的事情。作为一个额外的检查，我使用setTimeout来调用一个在3秒后调用appendTo方法的函数，看看它是否与加载页面后调用的方法有关。

Answer 1

问题是纸质材料元素与我想要移动的div具有相同的类名。我用相同的类名引用div，所以它也会带来那些。一个快速的解决方案是为div分配一个ID，并通过引用ID来使用detach。

jQuery appendTo将其他元素移动为Polymer中的修复，无意中添加了其他元素

1 个答案: