在jQuery中移动DOM元素(图层滑块)

时间:2013-12-09 05:37:01

标签: javascript jquery html wordpress dom

jQuery noob在这里。对不起,如果这个问题非常简单,虽然我正在努力学习,但我还没有接触到太多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>

感谢您的时间。

3 个答案:

答案 0 :(得分:2)

最后找到了一个用于移动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是页面上存在的图层滑块。我碰巧是1,所以#layerslider_1。下一个重要的部分是回调cbInit,在此函数中,您可以进行追加以及您想要对DOM进行的其他标记更改。 希望这有助于某人。

答案 1 :(得分:0)

see this jsfiddle您的html中的</div>代码未正确关闭,这可能会导致部分问题。如果我关闭了几个并运行我的代码,它将删除带有class='ls-your-logo'的元素,并将其附加到<div class='ls-inner'>,最终与之前的位置相同。也许如果你看看我的小提琴,你可以更好地关闭div标签,使其看起来像你想要的那样

答案 2 :(得分:0)

试试这个:

建议而不是每次使用$键入jQuery而不是它让你更容易。

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

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