prependTo（）不工作jQuery

由于某种原因jQuery中的prependTo（）函数不适用于我。这可能很简单，但我根本看不到它。我基本上只是试图通过jQuery获得最后的图像。prependTo（）不工作jQuery

$(document).ready(function(){ 
 
    var slide_count = $(".carousel li").length; 
 
    var slide_width = $(".carousel li").width(); 
 
    var slide_height = $(".carousel li").height(); 
 
    var cont_width = slide_width * slide_count; 
 
    
 
    $(".cont").css({ height: slide_height, width: slide_width}); 
 
    $(".carousel").css({ width: cont_width, marginLeft: - slide_width }); 
 
    $(".carousel li:last-child").prependTo(".carousel"); 
 
});

body{ 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 

 
.cont{ 
 
    text-align: center; 
 
    font-size: 0;/*removes white space*/ 
 
    margin: 60px auto 0 auto; 
 
} 
 

 
.carousel{ 
 
    position: relative; 
 
    margin: 0; 
 
    padding: 0; 
 
    list-style-type: none; 
 
    height: 100%; 
 
    max-height: 600px; 
 
} 
 

 
.carousel li{ 
 
    float: left; 
 
    width: 750px; 
 
    height: 350px; 
 
} 
 

 
.carousel li img{ 
 
    width: 100%; 
 
    height: auto; 
 
} 
 

 
.next{ 
 
    position: absolute; 
 
    top: 0; 
 
    right: 0; 
 
    width: 40px; 
 
    height: 40px; 
 
    background-color: blue; 
 
} 
 

 
.prev{ 
 
    position: absolute; 
 
    top: 0; 
 
    left: 0; 
 
    width: 40px; 
 
    height: 40px; 
 
    background-color: blue; 
 
}

<div class="cont"> 
 
    <ul class="carousel"> 
 
    <div class="prev"> 
 
    </div> 
 
    <li> 
 
     <img src="http://lorempixel.com/output/abstract-q-c-1500-700-2.jpg" alt="" /> 
 
    </li> 
 
    <li> 
 
     <img src="http://lorempixel.com/output/abstract-q-c-1500-700-6.jpg" alt="" /> 
 
    </li> 
 
    <li> 
 
     <img src="http://lorempixel.com/output/abstract-q-c-1500-700-1.jpg" alt="" /> 
 
    </li> 
 
    <li> 
 
     <img src="http://lorempixel.com/output/abstract-q-c-1500-700-3.jpg" alt="" /> 
 
    </li> 
 
    <div class="next"> 
 
    </div> 
 
    </ul> 
 

 
<script 
 
    src="https://code.jquery.com/jquery-3.2.1.min.js" 
 
    integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" 
 
    crossorigin="anonymous"></script>

来源

2017-06-29 Reece

的问题是，因为:last-child正在寻找li，不到最后li自己的孩子。您需要使用:last代替：

$(".carousel li:last").prependTo(".carousel");

另外请注意，您的HTML是无效的，因为你不能有一个div作为ul的孩子。您需要将它们放在ul之外或另一个li之内。

来源

2017-06-29 09:17:53

感谢完美的作品。是的，我只是注意到，如果我删除了它与最后孩子合作的div。我从现在开始并不知道你会记住这些。 – Reece

我会接受这个作为答案时，我可以 – Reece

我想这个问题是不正确的'div'内'ul'，而不是'：最后一个孩子'。 –

试试这个

$(document).ready(function(){ 
 
    var slide_count = $(".carousel li").length; 
 
    var slide_width = $(".carousel li").width(); 
 
    var slide_height = $(".carousel li").height(); 
 
    var cont_width = slide_width * slide_count; 
 
    
 
    $(".cont").css({ height: slide_height, width: slide_width}); 
 
    $(".carousel").css({ width: cont_width, marginLeft: - slide_width }); 
 
    $(".carousel li").last().prependTo(".carousel"); 
 
});

body{ 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 

 
.cont{ 
 
    text-align: center; 
 
    font-size: 0;/*removes white space*/ 
 
    margin: 60px auto 0 auto; 
 
} 
 

 
.carousel{ 
 
    position: relative; 
 
    margin: 0; 
 
    padding: 0; 
 
    list-style-type: none; 
 
    height: 100%; 
 
    max-height: 600px; 
 
} 
 

 
.carousel li{ 
 
    float: left; 
 
    width: 750px; 
 
    height: 350px; 
 
} 
 

 
.carousel li img{ 
 
    width: 100%; 
 
    height: auto; 
 
} 
 

 
.next{ 
 
    position: absolute; 
 
    top: 0; 
 
    right: 0; 
 
    width: 40px; 
 
    height: 40px; 
 
    background-color: blue; 
 
} 
 

 
.prev{ 
 
    position: absolute; 
 
    top: 0; 
 
    left: 0; 
 
    width: 40px; 
 
    height: 40px; 
 
    background-color: blue; 
 
}

<div class="cont"> 
 
    <ul class="carousel"> 
 
    <div class="prev"> 
 
    </div> 
 
    <li> 
 
     <img src="http://lorempixel.com/output/abstract-q-c-1500-700-2.jpg" alt="" /> 
 
    </li> 
 
    <li> 
 
     <img src="http://lorempixel.com/output/abstract-q-c-1500-700-6.jpg" alt="" /> 
 
    </li> 
 
    <li> 
 
     <img src="http://lorempixel.com/output/abstract-q-c-1500-700-1.jpg" alt="" /> 
 
    </li> 
 
    <li> 
 
     <img src="http://lorempixel.com/output/abstract-q-c-1500-700-3.jpg" alt="" /> 
 
    </li> 
 
    <div class="next"> 
 
    </div> 
 
    </ul> 
 

 
<script 
 
    src="https://code.jquery.com/jquery-3.2.1.min.js" 
 
    integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" 
 
    crossorigin="anonymous"></script>

来源

2017-06-29 10:12:27

prependTo（）不工作jQuery

回答

相关问题