Question

我在容器内有一个div，我想移出这个容器。 HTML在这里：

<li class="item last">
<div class="product-info" id="product-info">
    <p class="special-price-label" id="special-price-label">
        <span class="price percent-label">
            <span class="percent-label-inner-container">
                <span class="percent-label-label">SPAR</span>
                <span class="percent-label-value">42%</span>
            </span>
        </span>
    </p>
</div>
</li>

我想将＃special-price-label移出.product-info容器，以便HTML成为：

<li class="item last">
<p class="special-price-label" id="special-price-label">
    <span class="price percent-label">
        <span class="percent-label-inner-container">
            <span class="percent-label-label">SPAR</span>
            <span class="percent-label-value">42%</span>
        </span>
    </span>
</p>
<div class="product-info" id="product-info">

</div>
</li>

这个JS工作正常：

<script type="text/javascript">
( function($) {
$('#special-price-label').each(function() {
    $(this).insertBefore($(this).parent());
})
} ) ( jQuery );
</script>

但是我在页面上放了一些带有Ajax的InfiniteScroll（它是一个包含产品的类别页面），它不再起作用了。

我也试过这个代码而没有运气：

<script>
$(document).ready(function() {
    $( "#special-price-label" ).prependTo( "li.item" );
});
</script>

你能帮助我吗？

Answer 1

id必须在页面中使用一次。如果某些容器/ DOM节点有多个/重复实例，请使用class。
$(document).ready()在DOM准备就绪时触发，并且通常在任何ajax调用之前发生。

来到你的问题，这是你应该做的：

将DOM移动操作包装在命名函数中
在DOM ready（对于页面加载时的初始项目）
在ajax call

success

这是一个JSfiddle可能会有所帮助，而不是ajax调用，有一个动态添加更多项目的按钮。您可以尝试类似的ajax呼叫。

JS insertBefore / preprend在Ajax调用

1 个答案: