Javascript jQuery通过类的所有项进行迭代，而不管它们在DOM中的位置如何

我正在构建一个网页，其中许多跨度需要从一个类转换到另一个类，以创建bg颜色fadein效果。相同类的元素在页面中的分布是混合的，但它们都分组在公共类下

我想创建一个行为来执行以下操作：当您单击class-n的任何元素时，该类的其他元素将转换，单击的元素将作为起点

多亏了SO的帮助，这一点基本上已经解决了

然而，我仍然在为一个特定的问题而挣扎：如果遇到不同的类，我不希望转换停止，我只希望它不要切换并继续迭代。如果使用JSFIDLE，则无论它们在DOM树中的位置如何，都会将所有相同颜色的div转换为transition

在我的togglePrev/toggleNext函数中，我尝试了一些东西

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

但无法使其正常工作（它无法运行到下一个元素）。在这个条件句的结构中，有些东西我似乎无法理解。有人有线索吗

如果遇到不同的类，我不希望转换停止，我只希望它不要切换并继续迭代

您可能希望使用

nextAll（tId）.first（）选择下一个要切换的元素：
.next（）
只查看下一个同级，如果这与您的
tId
选择器不匹配，则不会选择任何元素

如果要迭代不同的分类元素，以便等待每个元素，但不想切换它，可以使用If条件，但必须从
next（）
/
prev（）
调用中删除
tId
选择器：

如果遇到不同的类，我不希望转换停止，我只希望它不要切换并继续迭代

您可能希望使用
nextAll（tId）.first（）选择下一个要切换的元素：
.next（）
只查看下一个同级，如果这与您的
tId
选择器不匹配，则不会选择任何元素

如果要迭代不同的分类元素，以便等待每个元素，但不想切换它，可以使用If条件，但必须从
next（）
/
prev（）
调用中删除
tId
选择器：

如果遇到不同的类，我不希望转换停止，我只希望它不要切换并继续迭代

您可能希望使用
nextAll（tId）.first（）选择下一个要切换的元素：
.next（）
只查看下一个同级，如果这与您的
tId
选择器不匹配，则不会选择任何元素

如果要迭代不同的分类元素，以便等待每个元素，但不想切换它，可以使用If条件，但必须从
next（）
/
prev（）
调用中删除
tId
选择器：

如果遇到不同的类，我不希望转换停止，我只希望它不要切换并继续迭代

您可能希望使用
nextAll（tId）.first（）选择下一个要切换的元素：
.next（）
只查看下一个同级，如果这与您的
tId
选择器不匹配，则不会选择任何元素

如果您想迭代不同的分类元素，以便等待每个元素，但不想切换它，那么可以使用If条件，但必须从
next（）
/
prev（）
调用中删除
tId
选择器：。
这是一个有趣的选择。我用了一种稍微不同的方法，获取所有匹配的元素，并将它们分成前后数组

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);
    });

}

这是一把小提琴：
这是一把很有趣的小提琴。我用了一种稍微不同的方法，获取所有匹配的元素，并将它们分成前后数组

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);
    });

}

这是一把小提琴：
这是一把很有趣的小提琴。我用了一种稍微不同的方法，获取所有匹配的元素，并将它们分成前后数组

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);
    });

}

这是一把小提琴：
这是一把很有趣的小提琴。我用了一种稍微不同的方法，获取所有匹配的元素，并将它们分成前后数组

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);
    });

}

这里有一个有用的提琴：
你真的设法把本来应该很简单的事情复杂化了吗

$(".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);
    });
});

$（“.div”）。单击（函数（）{
var coll=$（'.'.+this.className.replace（/（div单击| div）/g'，）.trim（），
idx=coll.index（$（this.toggleClass（'div-clicked'））；
$。每个（coll，函数（i）{
setTimeout（函数（）{
if（idx+i=0）coll.eq（idx-i）.toggleClass（'div-clicked'）；
}，i*200）；
});
});


它获取与当前单击的元素具有相同类的所有元素，以及当前单击的元素的索引，然后只需向当前索引添加和减去1即可获得下一个和上一个元素。检查的目的是确保它在到达终点时停止。
你真的设法使本来应该很简单的事情复杂化了吗

$(".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);
    });
});

$（“.div”）。单击（函数（）{
var coll=$（'.'.+this.className.replace（/（div单击| div）/g'，）.trim（），
idx=coll.index（$（this.toggleClass（'div-clicked'））；
$。每个（coll，函数（i）{
setTimeout（函数（）{
if（idx+i=0）coll.eq（idx-i）.toggleClass（'div-clicked'）；
}，i*200）；
});
});


它获取与当前单击的元素具有相同类的所有元素，以及当前单击的元素的索引，然后只需向当前索引添加和减去1即可获得下一个和上一个元素。检查是为了确保它在重新启动时停止