迭代期间的jQuery addclass但仅更改当前div

Question

我想根据 JSON 对象数组的值是 1 还是 0 来更改 div。我的问题是这段代码在每次迭代期间更新所有 div，而不是只更新循环索引的相应 div。

首先，我使用了 jQuery .css 方法，但它只执行第一个足够公平的方法......接下来我尝试使用 .addClass，然后最后使用 $(this) 与 .closest、.descendants 和其他一些类似的过滤方法。

我已经检查了控制台上的预期输出，这很好。我们会说有 2 个 div，我只想更改与当前循环索引相关的任何一个。在这种情况下，即使使用 .each 甚至 for 循环，addClass 也会始终更改它们，我说得对吗？

<div class="box">
<div class="box">

$(function () {
    $.getJSON('js/test.json', function (step1) {
        $.each(step1.object, function (index, value) {
            if (value == 1) {
                $(".box").addClass("engaged");
                console.log('Engaged');
            } else {
                $(".box").addClass("disengaged");
                console.log('Disengaged');
            }
        });
    });
});    

Answer 1

我认为这应该可以满足您的需求。如果没有更好的测试设置，我无法验证它:

$(function () {
    $.getJSON('js/test.json', function (step1) {
        var $boxes = $(".box");
        $.each(step1.object, function (index, value) {
            if (value == 1) {
                $boxes.eq(index).addClass("engaged");
                console.log('Engaged');
            } else {
                $boxes.eq(index).addClass("disengaged");
                console.log('Disengaged');
            }
        });
    });
}); 

此代码将找到所有框，然后 eq 函数 ( docs ) 将选择与您正在测试的值具有等效索引的框。