javascript - jQuery 迭代类的所有项目，无论它们在 DOM 中的位置如何

Question

我正在构建一个网页，其中许多跨度需要从一个类转换到另一个类以创建背景颜色淡入效果。相同类的元素在页面中混合分布，但它们都分组在公共(public)类下。<​​/p>

我想创建一个执行以下操作的行为:当您单击 n 类的任何元素时，该类的其他元素会发生转换，并以单击的元素作为起点。

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

但是，我仍然在解决一个特定问题:我不希望转换在遇到不同的类时停止，我只是希望它不要切换并继续迭代。如果是 jsfiddle，则会将所有相同颜色的 div 转换为过渡，无论它们在 DOM 树中的位置如何。

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

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

但无法让它正常工作(它不会迭代到下一个元素)。我似乎无法理解该条件句的结构。有人有线索吗？

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

FIDDLE

它获取与当前单击的元素具有相同类的所有元素以及当前单击的索引，然后只需在当前索引上加减 1 即可获取下一个和上一个元素。这些检查是为了确保它在到达末尾时停止。