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

您好，出于某种原因，这会将.active添加到每个＆＃39; .slide＆＃39;在＆＃39; .fader＆＃39;不是第一个......

右。 $(this).first()是无操作，与$(this)相同。 first获取jQuery集并将其缩减为该集合中的第一个（第0个）元素。根据定义，$(this)会生成一个包含单个元素的集合，因此.first()对它没有任何影响。

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

各种可能性：

如果您的目标是将.active添加到.slide下 已已{/ 1} .fader下的.active }，然后：Live Example（source）：

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

如果您的目标是将其从一张幻灯片移到另一张幻灯片，那么：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");

如果您真的想将其添加到第一张幻灯片，那么：Live Example（source）

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

或者替代：

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

如果您想将其添加到第一个（如果缺少）并将其从所有其他人（如果有）中删除，则：Live Example（source）：

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

使用:eq与:first时，我似乎有点不一致。为清楚起见，:eq(0)和:first是相同的。两者都是jQuery的补充，因此要求jQuery不要遵循浏览器的内置选择机制。相比之下，使用纯CSS选择器开始，然后使用.first() 方法，让jQuery使用浏览器的内置选择系统，但然后将结果减少到期望的子集。

在评论中你说过：

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

为此，您只需限制自己在每个.fader元素中工作。这是一个适用于jQuery集的示例插件，使得设置中的给定幻灯片处于活动状态：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）并对其进行操作。

Answer 2

$('.fader').each(function(){
    $this = $(this).find('.slide');
    $this.removeClass('.active').fadeOut();
    $active = $this.first().addClass('.active').fadeIn();
    setInterval(function(){ 
        $active = $active.next();
        $this.removeClass('.active').fadeOut(function(){
            if($active.length == 0){ $active = $this.first().addClass('.active').fadeIn(); }
            $active.addClass('.active').fadeIn();
        });
    },5000);
});

我得到了它，这就是我想要的。谢谢T.J

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

2 个答案: