jQuery iteration though all items of a class regardless of their position in the DOM

Question

i'm building a webpage where many span­ needs to be transitioned from one class to another to create a bg-color fadein effect. Distribution of elements of same classes is mixed through the page, but they are all grouped under common classes.

I want to create a behavior that does the following: when you click any elements of class-n, the other elements of that class transitions, with the clicked element acting as the starting point.

This is mostly figured out, thanks to some help on SO; see the jsfiddle.

$(".div").click(function () {
    var itemClasses = this.classList;
    var itemThread = itemClasses[1];

    colorThread($(this), itemThread);
    console.log(itemThread);
});

function colorThread($div, tId) {
    tId = '.'+tId;
    $div.toggleClass('div-clicked');

    setTimeout(function () {

        (function togglePrev($div) {
                $div.toggleClass('div-clicked');
            setTimeout(function () {
                togglePrev($div.prev(tId));
            }, 100);
        })($div.prev(tId));

        (function toggleNext($div) {
                $div.toggleClass('div-clicked');
            setTimeout(function () {
                toggleNext($div.next(tId));
            }, 100);
        })($div.next(tId));

    }, 100);
}

However, I am still struggling around a particular issue: I don't want the transition to stop if if encounter different class, I just want it not to toggle and keep iterating. If the jsfiddle, that would translate in all of the same color div to transition, regardless of their placement in the DOM tree.

In my togglePrev/toggleNext function, I have tried something along

if($div.hasClass(".classToTransition")) 
{ 
$div.toggleClass(".div-clicked");
}

but couldn't get it to work properly (it doesn't ieterate to the next elements). There is something that I can't seem to grasp in the structure of that conditional. Anyone has a lead?

Answer 1

I don't want the transition to stop if if encounter different class, I just want it not to toggle and keep iterating

You might want to use nextAll(tId).first()/prevAll(tId).first() to select the next to-be-toggled element: http://jsfiddle.net/35uNW/4/. .next() does only look at the next sibling, and if that doesn't match your tId selector, no element will be selected.

If you want to iterate the different-classed elements so that you wait for each one, but don't want to toggle it, you can use your if-condition but you must remove the tId selector from the next()/prev() calls: http://jsfiddle.net/35uNW/3/.

Answer 2

You really did manage to complicate something that should be pretty simple ?

$(".div").click(function () {
    var coll = $('.'+this.className.replace(/(div-clicked|div)/g, '').trim()),
        idx  = coll.index($(this).toggleClass('div-clicked'));

    $.each(coll, function(i) {
        setTimeout(function() {
            if (idx + i <= coll.length) coll.eq(idx + i).toggleClass('div-clicked');
            if (idx - i >= 0) coll.eq(idx - i).toggleClass('div-clicked');
        },i*200);
    });
});

FIDDLE

It gets all the elements with the same class as the one currently clicked, and the index of the currently clicked, and then just adds and subtract 1 to the current index to get the next and previous elements. The checks are to make sure it stops when it reaches the end.

Answer 3

This was a fun one. I did it a slightly different way, getting all of the matched elements and splitting them into before and after arrays.

var $allItems = $(".div");

$(".div").click(function () {
    var itemClasses = this.classList;
    var itemThread = itemClasses[1];

    colorThread($(this), itemThread);
});

function colorThread($div, classname) {

    var tId = '.'+classname,
        $divs = $allItems.filter(tId),
        index = $divs.index($div),
        $before = $divs.slice(0, index),
        before = $before.get().reverse(),
        $after = $divs.slice(index+1);

    $div.toggleClass('div-clicked');

    $(before).each(function(i, item){
         setTimeout(function () {
             $(item).toggleClass('div-clicked');
         }, i*100);
    });

    $($after).each(function(i, item){
        setTimeout(function () {
            $(item).toggleClass('div-clicked');
        }, i*100);
    });

}

Here's a working fiddle: http://jsfiddle.net/5sUr4/