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

回答

相關問題