使用 jQuery 循环遍历元素

Posted

技术标签:

【中文标题】使用 jQuery 循环遍历元素【英文标题】:Cycling through elements with jQuery 【发布时间】:2014-11-01 03:50:04 【问题描述】:

我有一个小脚本可以前后循环浏览一些项目。这是一个显示相同问题的简化笔:http://codepen.io/2kp/pen/sLoEb

$(document).ready(function()

  var totalslides = $('p').length;
  var currentslide;
  var newslide;

  $('.left').on('click', function() 
    currentslide = $('p.active').index()+1;
    if (currentslide == 1)
      newslide = totalslides;
    
    else 
      newslide = currentslide-1;
    
    $('p.active').removeClass('active');
    $('p:nth-child('+newslide+')').addClass('active');
  );

  $('.right').on('click', function() 
    currentslide = $('.slide.active').index()+1;
    if (currentslide == totalslides)
      newslide = 1;
    
    else 
      newslide = currentslide+1;
    
    $('p.active').removeClass('active');
    $('p:nth-child('+newslide+')').addClass('active');
  );

);

左键可以正常工作,但右键有时也可以。在实际站点上,左右按钮在除 iPad 之外的所有设备上都能正常工作。 iPhone、android 和台式机都很好。

真的很奇怪。感谢您提供任何帮助。

【问题讨论】:

为我工作。虽然我清理了其中的一些代码:jsbin.com/jeheni/1/edit?js,output 实际上不需要任何代码:***.com/a/7414607/227176 How to cycle through siblings using jQuery?的可能重复 这里是以重复答案为例的简化代码:jsbin.com/jeheni/2/edit?js,output 谢谢 Sukima。只是尝试更多,这是导致 iPad 出现问题的 nth-child() 。将其更改为 eq() 并且现在可以使用。 【参考方案1】:

使用.eq() 而不是:nth-child。我们也可以通过使用模数来减少对 if 块的需求(来自SO Answer 的想法):

$(function() 
  var $slides = $('p.slide');

  function transition(step) 
    var $activeSlide = $('p.slide.active').removeClass('active');
    var nextIndex = ($slides.index($activeSlide) + step) % $slides.length;
    $slides.eq(nextIndex).addClass('active');
  

  $('.left').on('click', $.proxy(transition, null, -1));
  $('.right').on('click', $.proxy(transition, null, 1));
)();
button 
  font-size: 32px;


.slide 
  display: none;


.slide.active 
  display: block;
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button class="left">&#9756;</button> <button class="right">&#9758;</button>
<div class="slides">
<p class="slide active">1: Lorem ipsum dolor sit amet, consectetur adipisicing elit. A alias neque necessitatibus, deleniti natus est dolores aut earum maiores ullam quas quis mollitia nemo, tenetur magni. Veniam in porro perspiciatis.</p>
<p class="slide">2: Itaque impedit ratione, eveniet, quisquam voluptate perferendis eum accusantium! Quia mollitia dolor a nulla, tenetur nesciunt ex tempore officia autem modi sit molestiae veniam voluptates vero itaque beatae similique quidem.</p>
<p class="slide">3: Est libero consequuntur ipsum distinctio corporis doloremque sunt iure autem tenetur labore at voluptate quam, repudiandae alias asperiores unde iste. Perspiciatis laborum, culpa sit maxime nostrum consequuntur labore reprehenderit adipisci.</p>
<p class="slide">4: Error eveniet, modi a sunt animi quos accusamus ullam quibusdam earum doloribus, omnis dicta ut. Facilis laboriosam autem libero itaque accusantium explicabo blanditiis veritatis sint nesciunt obcaecati, deleniti! Alias, impedit?</p>
<p class="slide">5: Modi neque harum vero minima nemo, dolor dolorum veritatis fuga obcaecati vitae! Quo commodi temporibus obcaecati rem repudiandae vel assumenda nostrum alias. Debitis non esse culpa officiis eum exercitationem distinctio!</p>
</div>

【讨论】:

【参考方案2】:

我不知道为什么。可能与我脚本的其他部分存在某种冲突,但用 eq() 替换 nth-child() 并调整数学在 iPad 上解决了问题。

【讨论】:

以上是关于使用 jQuery 循环遍历元素的主要内容,如果未能解决你的问题,请参考以下文章

使用类循环遍历每个元素并附加其文本JQUERY

jQuery 循环遍历带有类后缀的元素

jQuery循环遍历具有相同类的动态创建的元素

Jquery 循环遍历在运行时创建的元素

jQuery$.each循环遍历详解,各种取值对比,$.each遍历数组对象Dom元素二维数组双层循坏类json数据等等

jQuery循环使用相同类的元素