prependTo() funktioniert nicht jQuery

Question

aus irgendeinem Grund funktioniert die Funktion prependTo() in jQuery nicht für mich. Es ist wahrscheinlich etwas einfaches, dass ich vermisse, aber ich kann es überhaupt nicht sehen. Ich versuche im Grunde nur, das letzte Bild durch jQuery am Anfang erscheinen zu lassen.

$(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>

Answer 1

Das Problem ist, weil :last-child ist für Kinder von den li, nicht die letzten li selbst suchen. Sie müssen stattdessen :last verwenden:

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

Beachten Sie auch, dass Ihre HTML ist ungültig, da Sie kein div als Kind eines ul haben kann. Sie müssen sie außerhalb der ul oder innerhalb einer anderen li setzen.

Answer 2

testen

$(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>