每个和第一个导致奇怪的结果

Question

$('.fader').each(function(i){
    $(this).find('.slide').each(function(i){
        $(this).first().addClass('active');
    });
});

您好,出于某种原因,这会在.fader'下面的每个'.slide'中添加.active而不是第一个.我希望在网站上多次使用这个,所以我想避免绝对,这是我使用eaches的原因.

当我发出警报(i)它计数到3这是正确的计数时,我希望它会因为这个而变为0,0,0,0,但事实并非如此.

<div class="container fader">
    <div class="row">
        <div class="col-md-12"></div>
    </div>
    <div class="row slide">
         <div class="col-md-4"></div>
         <div class="col-md-8"></div>
     </div>
     <div class="row slide">
         <div class="col-md-4"></div>
         <div class="col-md-8"></div>
     </div>
     <div class="row slide">
         <div class="col-md-4"></div>
         <div class="col-md-8"></div>
     </div>
     <div class="row slide">
         <div class="col-md-4"></div>
         <div class="col-md-8"></div>
     </div>    
</div>

这是HTML

Answer 1

您好,出于某种原因,这是在.fader'下面的每个'.slide'添加.active而不是第一个....

对.$(this).first()是一个无操作,它是一样的$(this).first获取jQuery集并将其缩减为该集合中的第一个(第0个)元素.根据定义,$(this)生成一个具有单个元素的集合,因此.first()对它没有影响.

目前尚不清楚你的目标是什么.

各种可能性:

1. 如果你的目标是加入.active到第一.slide下.fader不已经具备.active,则:活生生的例子(源):

   $(".fader .slide:not(.active):eq(0)").addClass("active");
   

2. 如果您的目标是将其从一张幻灯片移动到下一张幻灯片,那么:Live Example(source)

   var active = $(".fader .active");
   if (active.length) {
     active = active.removeClass("active").next();
   }
   if (!active.length) {
     active = $(".fader .slide").first();
   }
   active.addClass("active");
   

3. 如果你真的只想将它添加到第一张幻灯片,那么:Live Example(source)

   $(".fader .slide").first().addClass("active");
   

   或者:

   $(".fader .slide:first").addClass("active");
   

4. 如果要将其添加到第一个(如果缺少)并将其从所有其他(如果存在)中删除,则:Live Example(source):

   $(".fader .slide")
       .first().addClass("active").end()
       .slice(1).removeClass("active");
   

在使用:eqvs. 时,我似乎有点不一致:first.为清楚起见::eq(0)并且:first是一回事.两者都是jQuery的补充,因此要求jQuery不要遵循浏览器的内置选择机制.相反,使用纯CSS选择器开始,然后使用该.first() 方法,让jQuery使用浏览器的内置选择系统,但然后将结果减少到所需的子集.

你在评论中说过:

我想像jQuery插件一样开发它,我所要做的就是将类推子添加到父级并滑动到它的每个子节点,它将成为一个滑块.当然因为这个,我需要确保我不是绝对的选择器,每个.fader都被看到和.slide.

要做到这一点,你只需要限制自己在每个.fader元素中工作.这是一个适用于jQuery集的示例插件,使得set中的给定幻灯片处于活动状态:Live Example(source):

// Plugin
(function($) {
  $.fn.slider = function(index) {
    // `this` here is the jQuery set; iterate over it
    this.each(function() {
      // `this` here is each DOM element in the set
      var slides = $(this).find(".slide");
      slides.removeClass("active");
      slides.eq(index).addClass("active");
    });
  };
})(jQuery);

// Use it to make the first slide in each
// fader active
$(".fader").slider(0);

slider 可能是插件的错误名称,但你明白了.

关键位是我们通过.fader元素集迭代(如您所怀疑的),并且在每次迭代中,我们找到推子内的.slide元素(使用)并对其进行操作..find