javascript - Each and First causing strange results -

javascript - Each and First causing strange results -

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

hello, reason adding .active every '.slide' under '.fader' not first one. want utilize multiple times through out site want avoid beingness absolute , that's reasoning behind using eaches.

when alert (i) counts 3 right count, expect go 0, 0, 0, 0 because of doesn't.

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

here html

hello, reason adding .active every '.slide' under '.fader' not first one....

right. $(this).first() no-op, it's same $(this). first takes jquery set , reduces first (0th) element in set. definition, $(this) produces set single element, .first() has no effect on it.

it's not clear goal is.

various possibilities:

if goal add together .active first .slide under .fader doesn't already have .active, then: live example (source):

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

if goal move 1 slide next, then: 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");

if literally want add together first slide, then: live example (source)

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

or alternately:

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

if want add together first (if missing) , remove others (if present), then: live example (source):

$(".fader .slide") .first().addclass("active").end() .slice(1).removeclass("active");

i appear have been bit inconsistent above when using :eq vs. :first. clarity: :eq(0) , :first same thing. both jquery additions, , require jquery not defer browser's built-in selection mechanism. in contrast, using pure css selector start with, using .first() method, lets jquery utilize browser's built-in selection scheme cut down result desired subset.

in comment you've said:

i want develop jquery plugin have add together class fader parent , slide each of children , become slider. of course of study because of need create sure i'm not beingness absolute selector, every .fader gets looked @ , .slide.

to that, constrain working within each .fader element. here's illustration plugin works on jquery set, making given slide within set active: live example (source):

// plugin (function($) { $.fn.slider = function(index) { // `this` here jquery set; iterate on this.each(function() { // `this` here each dom element in set var slides = $(this).find(".slide"); slides.removeclass("active"); slides.eq(index).addclass("active"); }); }; })(jquery); // utilize create first slide in each // fader active $(".fader").slider(0);

slider wrong name plugin, idea.

the key bit there iterate (as suspected) through set of .fader elements, , within each iteration, find .slide elements inside fader (using .find) , deed on those.

javascript jquery each