在 jQuery 中移动 DOM 元素（图层滑块）

Question

jQuery 菜鸟在这里。抱歉，如果问题真的很简单，尽管我正在努力学习，但我并没有接触过太多的 jquery。

我试图将 DOM 元素从一个地方移动到另一个地方，但我似乎遇到了一些错误。

当我尝试测试 DOM 是否存在时，我得到元素不在 DOM 中的指示：

if (jQuery('.ls-yourlogo').length) {
    alert('Found!');
} else {
    alert('NOT FOUND!');
}

我正在尝试将 .ls-yourlogo 移动到 .ls-inner。

我尝试了几种不同的方法，包括：

jQuery('#layerslider_1').children('img').appendTo('#layerslider_1').children('.ls-inner');

还有

    jQuery('.ls-yourlogo').appendTo('.ls-inner');

我知道 .ls-yourlogo 和 .ls-inner DOM 元素都是用 jQuery 创建的。我不确定这是否是导致问题的原因。

我目前正在使用 WordPress 的图层滑块插件：http://codecanyon.net/item/layerslider-responsive-wordpress-slider-plugin-/1362246

  <div id="slider">
<script type="text/javascript"></script>
<script type="text/javascript"></script>
    <div class="ls-wp-fullwidth-container" style="height: 317px;">
        <div class="ls-wp-fullwidth-helper" style="height: 317px; width: 1349px; left: 0px;">
            <div id="layerslider_1" class="ls-wp-container ls-container ls-noskin" style="width: 1050px; height: 317px; margin: 0px auto; visibility: visible;">
            <div class="ls-webkit-hack"></div>
            <div class="ls-inner">
                <div class="ls-layer ls-active">
                    <img class="ls-s-1">
                    <p ></p>
                    <p ></p>
                </div>
                <div class="ls-layer" >
                    <img class="ls-s-1">
                </div>
            <div class="ls-circle-timer"></div>
            <div class="ls-loading-container"></div>
            <div class="ls-thumbnail-wrapper"></div>
            <div class="ls-shadow"></div>
            <img class="ls-yourlogo">
        </div>
    </div>

感谢您的宝贵时间。

Answer 1

终于找到了在 Layer Slider DOM 中移动元素的解决方案。

        jQuery('#layerslider_1').layerSlider({
        hoverPrevNext : false,
        cbInit              : function(element){
                                jQuery('.ls-yourlogo').appendTo('.ls-inner');
                                jQuery('.ls-thumbnail-slide > a').addClass('ls-thumbnail-style');

                              }
    });

ID 是页面上存在的图层滑块的 ID。我的恰好是 1，所以它的#layerslider_1。下一个重要部分是回调 cbInit，在此函数中，您可以进行追加以及您想要对 DOM 进行的任何其他标记更改。 希望这可以帮助某人。

Answer 2

试试这个：

建议不要每次都输入 jQuery，而是使用 $ 来代替它，这样对你来说更容易。

if ($('.ls-yourlogo')) {
    alert('Found!');
} else {
    alert('NOT FOUND!');
}

我还建议使用#ids 而不是类，因为在Jquery 中使用ids 比类快得多。并确保在检查它是否退出之前先调用创建 .is-yourlogo 类的脚本。

Answer 3

see this jsfiddleHTML 中的</div> 标记没有正确关闭，这可能是导致问题的一部分。如果我关闭一些并运行我的代码，它会删除带有 class='ls-your-logo' 的元素并将其附加到 <div class='ls-inner'> 最终与以前相同的位置。也许如果你看看我的小提琴，你可以更好地关闭 div 标签到你希望它看起来正确的样子