Question

由于某种原因，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>

Answer 1

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

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

另请注意，您的HTML无效，因为您无法将div作为ul的子级。您需要将它们放在ul之外或其他li之内。

Answer 2

试试这个

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

prependTo（）不工作jQuery

2 个答案: