JQuery停止在最后一个元素.length＆amp; .size（）不起作用

时间：2016-08-17 17:00:55

标签： jquery html css

我不明白为什么代码不会停在最后一个元素，下一个＆amp;以前的buttom。它曾经工作过，但现在已不复存在了。

工作版：

$(document).ready(function() {
  $('#next').click(function() {
    if ($('.active').next('.case').length) {
      $('.active').removeClass('active')
        .next('.case')
        .addClass('active');
    }
  });
  $('#prev').click(function() {
    if ($('.active').prev('.case').length) {
      $('.active').removeClass('active')
        .prev('.case')
        .addClass('active');
    }
  });
});
html,
body,
section {
  margin: 0px;
  padding: 0px;
  width: 100%;
  height: 100%;
}
#next,
#prev {
  position: fixed;
  z-index: 101;
}
#next {
  right: 0px;
}
#prev {
  left: 0px;
}
#t1 {
  float: left;
  height: 100%;
  width: 43%;
  background-color: #c92639;
  position: absolute;
  left: 0px;
}
#logo >h1 {
  color: white;
}
#logo >h3 {
  width: 58%;
  margin: 0 auto;
}
#t2,
#t3 {
  height: 50%;
  width: 57%;
  margin-left: auto;
  margin-right: 0px;
}
#t3 {
  position: absolute;
  right: 0px;
  bottom: 0px;
  background-color: #c8c8c8;
}
#t2 {
  background-color: white;
  position: absolute;
  right: 0px;
  top: 0px;
}
#t2 >img {
  margin-top: 11%;
}
#logo {
  margin-top: 40%;
}
#t3>ul {
  display: inline-table;
  width: 80%;
  margin: 0 auto;
  margin-top: 50px;
}
#t3>ul>li {
  display: inline-table;
  width: 33%;
}
#t3>ul>li>div>img {
  width: 53%;
  margin-top: 25%;
}
#home {
  display: none !important;
}
#circle1,
#circle2,
#circle3 {
  border-radius: 128px;
  width: 150px;
  height: 150px;
  margin: 0 auto;
  box-shadow: 10px 10px 5px #888888;
}
#circle1 {
  background: #32325f;
}
#circle2 {
  background: white;
}
#circle3 {
  background: #ef9d34;
}
.active {
  display: initial !important;
  z-index: 100;
}
#case {
  display: none;
  position: absolute;
  top: 0px;
  height: 100%;
  width: 100%;
  z-index: 99;
}
.stern1 {
  background: blue;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="next">
  <h1>next</h1>
</div>
<div id="prev">
  <h1>prev</h1>
</div>

<div id="case" class="case active">
  <div id="t1" class="tcee1">
    <div id="logo">
      <img src="img/cee.png" id="cee">
      <div id="underline"></div>
      <br>
      <h1>BRINGING AN OFFLINE ENCOUNTER TO AN ONLINE RELATION</h1>
      <br>
      <h3>Every day Cee-Platform helps their customers to build a bridge between their offline and online marketing challenges.</h3>
    </div>
  </div>

  <div id="t2" class="case tcee2">
    <img src="img/ceedev.png">
  </div>
  <div id="t3" class="tcee3">
    <ul>
      <li>
        <div id="circle1">
          <img src="img/computer.png">
        </div>
        <br>
        <div id="underline"></div>
        <h2>Responsiv</h2>
        <br>
        <p>My expierences with developing websites has learned me to make them structualy responsive from the ground up making it accesible for all platforms</p>
      </li>
      <li>
        <div id="circle2">
          <img src="img/g.png">
        </div>
        <br>
        <div id="underline"></div>
        <h2>SEO</h2>
        <br>
        <p>Optimizing your website to result with high results on googles googles list</p>
      </li>
      <li>
        <div id="circle3">
          <img src="img/hand.png">
        </div>
        <br>
        <div id="underline"></div>
        <h2>Storytelling</h2>
        <br>
        <p>With every website you want to tell a story, it doens't matter if you want to tell your visitor how aswesome your compeny or how important your goal is. I'll make it the best one out there</p>
      </li>
    </ul>
  </div>
</div>

<div id="case" class="case">
  <div id="t1" class="tstern1" style="background:blue;">
    <div id="logo">
      <img src="img/cee.png" id="cee">
      <div id="underline"></div>
      <br>
      <h1>BRINGING AN OFFLINE ENCOUNTER TO AN ONLINE RELATION</h1>
      <br>
      <h3>Every day Cee-Platform helps their customers to build a bridge between their offline and online marketing challenges.</h3>
    </div>
  </div>
  <div id="t2" class="tstern2">
    <img src="img/ceedev.png">
  </div>
  <div id="t3" class="tstern3">
    <ul>
      <li>
        <div id="circle1">
          <img src="img/computer.png">
        </div>
        <br>
        <div id="underline"></div>
        <h2>Responsiv</h2>
        <br>
        <p>My expierences with developing websites has learned me to make them structualy responsive from the ground up making it accesible for all platforms</p>
      </li>
      <li>
        <div id="circle2">
          <img src="img/g.png">
        </div>
        <br>
        <div id="underline"></div>
        <h2>SEO</h2>
        <br>
        <p>Optimizing your website to result with high results on googles googles list</p>
      </li>
      <li>
        <div id="circle3">
          <img src="img/hand.png">
        </div>
        <br>
        <div id="underline"></div>
        <h2>Storytelling</h2>
        <br>
        <p>With every website you want to tell a story, it doens't matter if you want to tell your visitor how aswesome your compeny or how important your goal is. I'll make it the best one out there</p>
      </li>
    </ul>
  </div>
</div>

<div id="case" class="case">
  <div id="t1" class="tstern1" style="background:black;">
    <div id="logo">
      <img src="img/cee.png" id="cee">
      <div id="underline"></div>
      <br>
      <h1>BRINGING AN OFFLINE ENCOUNTER TO AN ONLINE RELATION</h1>
      <br>
      <h3>Every day Cee-Platform helps their customers to build a bridge between their offline and online marketing challenges.</h3>
    </div>
  </div>
  <div id="t2" class="tstern2">
    <img src="img/ceedev.png">
  </div>
  <div id="t3" class="tstern3">
    <ul>
      <li>
        <div id="circle1">
          <img src="img/computer.png">
        </div>
        <br>
        <div id="underline"></div>
        <h2>Responsiv</h2>
        <br>
        <p>My expierences with developing websites has learned me to make them structualy responsive from the ground up making it accesible for all platforms</p>
      </li>
      <li>
        <div id="circle2">
          <img src="img/g.png">
        </div>
        <br>
        <div id="underline"></div>
        <h2>SEO</h2>
        <br>
        <p>Optimizing your website to result with high results on googles googles list</p>
      </li>
      <li>
        <div id="circle3">
          <img src="img/hand.png">
        </div>
        <br>
        <div id="underline"></div>
        <h2>Storytelling</h2>
        <br>
        <p>With every website you want to tell a story, it doens't matter if you want to tell your visitor how aswesome your compeny or how important your goal is. I'll make it the best one out there</p>
      </li>
    </ul>
  </div>
</div>

破碎版：

我正试图让它停在带有两个按钮的最后一个元素上。

$(document).ready(function() {

  $('#next').click(function() {
    if ($('.in1,.in2,.in3').next('.t1,.t2,.t3').length) {

      $('.t1').animate({
        left: '-1000px'
      })
      $('.in1').removeClass('in1')
        .next('.t1')
        .addClass('in1');


      $('.t2').animate({
        right: '-1000px'
      })
      $('.in2').removeClass('in2')
        .next('.t2')
        .addClass('in2');

      $('.t3').animate({
        bottom: '-1000px'
      })
      $('.in3').removeClass('in3')
        .next('.t3')
        .addClass('in3');

    }
  });

  $('#prev').click(function() {
    if ($('.in1,.in2,.in3').prev('.t1,.t2,.t3').length) {

      $('.t1').animate({
        left: '-1000px'
      })
      $('.in1').removeClass('in1')
        .prev('.t1')
        .addClass('in1');


      $('.t2').animate({
        right: '-1000px'
      })
      $('.in2').removeClass('in2')
        .prev('.t2')
        .addClass('in2');

      $('.t3').animate({
        bottom: '-1000px'
      })
      $('.in3').removeClass('in3')
        .prev('.t3')
        .addClass('in3');

    }
  });

});
html,
body,
section {
  margin: 0px;
  padding: 0px;
  width: 100%;
  height: 100%;
  overflow: hidden;
}
#next,
#prev {
  position: fixed;
  z-index: 101;
}
#next {
  top: 0px;
  right: 0px;
}
#prev {
  left: 0px;
}
.t1 {
  float: left;
  height: 100%;
  width: 43%;
  background-color: #c92639;
  position: absolute;
  left: -1000px;
}
.t2 {
  background-color: white;
  position: absolute;
  right: 0px;
  top: -1000px;
}
.t3 {
  position: absolute;
  right: 0px;
  bottom: -1000px;
  background-color: #c8c8c8;
}
.out {
  -webkit-animation: forwards;
  -webkit-animation-name: out3;
  /* Chrome, Safari, Opera */
  -webkit-animation-duration: 4s;
  /* Chrome, Safari, Opera */
  animation: forwards;
  animation-name: out3;
  animation-duration: 4s;
}
/* Chrome, Safari, Opera */

@-webkit-keyframes out3 {
  from {
    bottom: 0px;
  }
  to {
    bottom: -1000px;
  }
}
/* Standard syntax */

@keyframes t1 {
  from {
    left: -1000px;
  }
  to {
    left: 0px;
  }
}
.t2,
.t3 {
  height: 50%;
  width: 57%;
  margin-left: auto;
  margin-right: 0px;
}
.in1 {
  -webkit-animation: forwards;
  -webkit-animation-name: t1;
  /* Chrome, Safari, Opera */
  -webkit-animation-duration: 4s;
  /* Chrome, Safari, Opera */
  animation: forwards;
  animation-name: t1;
  animation-duration: 4s;
}
/* Chrome, Safari, Opera */

@-webkit-keyframes t1 {
  from {
    left: -1000px;
  }
  to {
    left: 0px;
  }
}
/* Standard syntax */

@keyframes t1 {
  from {
    left: -1000px;
  }
  to {
    left: 0px;
  }
}
.in2 {
  -webkit-animation: forwards;
  -webkit-animation-name: t2;
  /* Chrome, Safari, Opera */
  -webkit-animation-duration: 4s;
  /* Chrome, Safari, Opera */
  animation: forwards;
  animation-name: t2;
  animation-duration: 4s;
}
/* Chrome, Safari, Opera */

@-webkit-keyframes t2 {
  from {
    top: -1000px;
  }
  to {
    top: 0px;
  }
}
/* Standard syntax */

@keyframes t2 {
  from {
    top: -1000px;
  }
  to {
    top: 0px;
  }
}
.in3 {
  -webkit-animation: forwards;
  -webkit-animation-name: t3;
  /* Chrome, Safari, Opera */
  -webkit-animation-duration: 4s;
  /* Chrome, Safari, Opera */
  animation: forwards;
  animation-name: t3;
  animation-duration: 4s;
}
/* Chrome, Safari, Opera */

@-webkit-keyframes t3 {
  from {
    bottom: -1000px;
  }
  to {
    bottom: 0px;
  }
}
/* Standard syntax */

@keyframes t3 {
  from {
    bottom: -1000px;
  }
  to {
    bottom: 0px;
  }
}
#logo >h1 {
  color: white;
}
#logo >h3 {
  width: 58%;
  margin: 0 auto;
}
.t2 >img {
  margin-top: 11%;
}
#logo {
  margin-top: 40%;
}
.t3>ul {
  display: inline-table;
  width: 80%;
  margin: 0 auto;
  margin-top: 50px;
}
.t3>ul>li {
  display: inline-table;
  width: 33%;
}
.t3>ul>li>div>img {
  width: 53%;
  margin-top: 25%;
}
#home {
  display: none !important;
}
#circle1,
#circle2,
#circle3 {
  border-radius: 128px;
  width: 150px;
  height: 150px;
  margin: 0 auto;
  box-shadow: 10px 10px 5px #888888;
}
#circle1 {
  background: #32325f;
}
#circle2 {
  background: white;
}
#circle3 {
  background: #ef9d34;
}
#case {
  display: none;
  position: absolute;
  top: 0px;
  height: 100%;
  width: 100%;
  z-index: 99;
}
.stern1 {
  background: blue;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="next">
  <h1>next</h1>
</div>
<div id="prev">
  <h1>prev</h1>
</div>

<!--page1-->
<div id="tcee1" class="t1 in1">
</div>
<div id="tstern1" class="t1" style="background:blue;">
</div>
<div id="tsky1" class="t1" style="background:black;">
</div>

<div id="tcee2" class="t2 in2">
</div>
<div id="tstern2" class="t2">
</div>
<div id="tsky2" class="t2">
</div>

<div id="tcee3" class="t3 in3">
  <ul>
    <li>
      <div id="circle1">
      </div>
    </li>
    <li>
      <div id="circle2">
      </div>
    </li>
    <li>
      <div id="circle3">
      </div>
    </li>
  </ul>
</div>
<!--page2-->
<div id="tstern3" class="t3">
  <ul>
    <li>
      <div id="circle1">

      </div>

    </li>
    <li>
      <div id="circle2">

      </div>
      < </li>
        <li>
          <div id="circle3">

          </div>

        </li>
  </ul>
</div>
<!--page3-->
<div id="tcee3" class="t3">
  <ul>
    <li>
      <div id="circle1">
      </div>

    </li>
    <li>
      <div id="circle2">

      </div>
    </li>
    <li>
      <div id="circle3">
      </div>
    </li>
  </ul>
</div>

回答：条件（$（'。in1，.in2，.in3'）。next（'。t1，.t2，.t3'）。len gth）也是真的（例如）。 in2有一个t3作为下一个兄弟，在这种情况下你需要假。您应该只测试其中一个，如下所示：（$（'。in1'）。next（'。t1'）。length）。如果你有更多这样的问题，我可以建议你为它创建一个新问题吗？这样你就会有更多的人看着它，而你和那些回答的人也有一些奖励。 - trincot

2 个答案:

答案 0 :(得分：0)

当您将课程.in1添加到上一个.t1时，表达式$('.in1,.in2,.in3').next('.t1,.t2,.t3')与第一个.t2匹配，因为它是最后一个.t1之后的下一个元素}。

您可以通过将所有.t1包装在DIV中来解决此问题，同样适用于所有.t2和.t3，以便.next()不会在基团。

$(document).ready(function() {

  $('#next').click(function() {
    if ($('.in1,.in2,.in3').next('.t1,.t2,.t3').length) {

      $('.t1').animate({
        left: '-1000px'
      })
      $('.in1').removeClass('in1')
        .next('.t1')
        .addClass('in1');


      $('.t2').animate({
        right: '-1000px'
      })
      $('.in2').removeClass('in2')
        .next('.t2')
        .addClass('in2');

      $('.t3').animate({
        bottom: '-1000px'
      })
      $('.in3').removeClass('in3')
        .next('.t3')
        .addClass('in3');

    }
  });

  $('#prev').click(function() {
    if ($('.in1,.in2,.in3').prev('.t1,.t2,.t3').length) {

      $('.t1').animate({
        left: '-1000px'
      })
      $('.in1').removeClass('in1')
        .prev('.t1')
        .addClass('in1');


      $('.t2').animate({
        right: '-1000px'
      })
      $('.in2').removeClass('in2')
        .prev('.t2')
        .addClass('in2');

      $('.t3').animate({
        bottom: '-1000px'
      })
      $('.in3').removeClass('in3')
        .prev('.t3')
        .addClass('in3');

    }
  });

});
html,
body,
section {
  margin: 0px;
  padding: 0px;
  width: 100%;
  height: 100%;
  overflow: hidden;
}
#next,
#prev {
  position: fixed;
  z-index: 101;
}
#next {
  top: 0px;
  right: 0px;
}
#prev {
  left: 0px;
}
.t1 {
  float: left;
  height: 100%;
  width: 43%;
  background-color: #c92639;
  position: absolute;
  left: -1000px;
}
.t2 {
  background-color: white;
  position: absolute;
  right: 0px;
  top: -1000px;
}
.t3 {
  position: absolute;
  right: 0px;
  bottom: -1000px;
  background-color: #c8c8c8;
}
.out {
  -webkit-animation: forwards;
  -webkit-animation-name: out3;
  /* Chrome, Safari, Opera */
  -webkit-animation-duration: 4s;
  /* Chrome, Safari, Opera */
  animation: forwards;
  animation-name: out3;
  animation-duration: 4s;
}
/* Chrome, Safari, Opera */

@-webkit-keyframes out3 {
  from {
    bottom: 0px;
  }
  to {
    bottom: -1000px;
  }
}
/* Standard syntax */

@keyframes t1 {
  from {
    left: -1000px;
  }
  to {
    left: 0px;
  }
}
.t2,
.t3 {
  height: 50%;
  width: 57%;
  margin-left: auto;
  margin-right: 0px;
}
.in1 {
  -webkit-animation: forwards;
  -webkit-animation-name: t1;
  /* Chrome, Safari, Opera */
  -webkit-animation-duration: 4s;
  /* Chrome, Safari, Opera */
  animation: forwards;
  animation-name: t1;
  animation-duration: 4s;
}
/* Chrome, Safari, Opera */

@-webkit-keyframes t1 {
  from {
    left: -1000px;
  }
  to {
    left: 0px;
  }
}
/* Standard syntax */

@keyframes t1 {
  from {
    left: -1000px;
  }
  to {
    left: 0px;
  }
}
.in2 {
  -webkit-animation: forwards;
  -webkit-animation-name: t2;
  /* Chrome, Safari, Opera */
  -webkit-animation-duration: 4s;
  /* Chrome, Safari, Opera */
  animation: forwards;
  animation-name: t2;
  animation-duration: 4s;
}
/* Chrome, Safari, Opera */

@-webkit-keyframes t2 {
  from {
    top: -1000px;
  }
  to {
    top: 0px;
  }
}
/* Standard syntax */

@keyframes t2 {
  from {
    top: -1000px;
  }
  to {
    top: 0px;
  }
}
.in3 {
  -webkit-animation: forwards;
  -webkit-animation-name: t3;
  /* Chrome, Safari, Opera */
  -webkit-animation-duration: 4s;
  /* Chrome, Safari, Opera */
  animation: forwards;
  animation-name: t3;
  animation-duration: 4s;
}
/* Chrome, Safari, Opera */

@-webkit-keyframes t3 {
  from {
    bottom: -1000px;
  }
  to {
    bottom: 0px;
  }
}
/* Standard syntax */

@keyframes t3 {
  from {
    bottom: -1000px;
  }
  to {
    bottom: 0px;
  }
}
#logo >h1 {
  color: white;
}
#logo >h3 {
  width: 58%;
  margin: 0 auto;
}
.t2 >img {
  margin-top: 11%;
}
#logo {
  margin-top: 40%;
}
.t3>ul {
  display: inline-table;
  width: 80%;
  margin: 0 auto;
  margin-top: 50px;
}
.t3>ul>li {
  display: inline-table;
  width: 33%;
}
.t3>ul>li>div>img {
  width: 53%;
  margin-top: 25%;
}
#home {
  display: none !important;
}
#circle1,
#circle2,
#circle3 {
  border-radius: 128px;
  width: 150px;
  height: 150px;
  margin: 0 auto;
  box-shadow: 10px 10px 5px #888888;
}
#circle1 {
  background: #32325f;
}
#circle2 {
  background: white;
}
#circle3 {
  background: #ef9d34;
}
#case {
  display: none;
  position: absolute;
  top: 0px;
  height: 100%;
  width: 100%;
  z-index: 99;
}
.stern1 {
  background: blue;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="next">
  <h1>next</h1>
</div>
<div id="prev">
  <h1>prev</h1>
</div>

<!--page1-->
<div>
  <div id="tcee1" class="t1 in1">
  </div>
  <div id="tstern1" class="t1" style="background:blue;">
  </div>
  <div id="tsky1" class="t1" style="background:black;">
  </div>
</div>

<div>
  <div id="tcee2" class="t2 in2">
  </div>
  <div id="tstern2" class="t2">
  </div>
  <div id="tsky2" class="t2">
  </div>
</div>

<div>
  <div id="tcee3" class="t3 in3">
    <ul>
      <li>
        <div id="circle1">
        </div>
      </li>
      <li>
        <div id="circle2">
        </div>
      </li>
      <li>
        <div id="circle3">
        </div>
      </li>
    </ul>
  </div>
  <!--page2-->
  <div id="tstern3" class="t3">
    <ul>
      <li>
        <div id="circle1">

        </div>

      </li>
      <li>
        <div id="circle2">

        </div>
        < </li>
          <li>
            <div id="circle3">

            </div>

          </li>
    </ul>
  </div>
  <!--page3-->
  <div id="tcee3" class="t3">
    <ul>
      <li>
        <div id="circle1">
        </div>

      </li>
      <li>
        <div id="circle2">

        </div>
      </li>
      <li>
        <div id="circle3">
        </div>
      </li>
    </ul>
  </div>
</div>

答案 1 :(得分：0)

条件（$（'。in1，.in2，.in3'）。next（'。t1，.t2，.t3'）。len gth）也是正确的（例如）.in2有作为下一个兄弟的t3，在这种情况下你需要假。您应该只测试其中一个，如下所示：（$（'。in1'）。next（'。t1'）。length）。如果你有更多这样的问题，我可以建议你为它创建一个新问题吗？这样你就会有更多的人看着它，而你和那些回答的人也有一些奖励。

- trincot

相关问题
最新问题