如何将CSS样式应用于动态JavaScript数组？

Question

我正在尝试将CSS样式应用于通过JSON对象动态添加到HTML DOM的输入元素。

基本上，Ajax调用接收带有数据数组的JSON有效负载。然后，某些KnockoutJS代码在DOM上foreach以动态添加行。

我试图向值小于所需值的输入添加样式。最重要的是，我知道这些元素对于DOM是动态的，我无法访问它们以便应用样式。我已经尝试了jQuery和纯JavaScript，但我无法访问新添加的字段。

我该如何做？

我创建了一个非常复杂的fiddle，用于创建输入。但是，我无法弄清楚如何为年份早于当前年份的NextPaymentDate输入添加.k-invalid样式。

var $incomeWrapper = $("#income-wrapper");
$incomeWrapper.find("input#iNextPaymentDate_" + i).removeClass("k-valid").addClass("k-invalid");

上面的方法不起作用。 http://jsfiddle.net/kahanu/rdb00n76/9/

- King Wilder

Answer 1

您可以向选择器添加过滤函数，如下所示：

您可以像这样向您的选择器添加过滤函数：

$('input[id^="iNextPaymentDate_"]').filter(function(index) {
    return parseInt($(this).val().split('/')[2]) < new Date().getFullYear();
}).addClass('k-invalid');

Fiddle: http://jsfiddle.net/rdb00n76/10/

以上代码选择所有以iNextPaymentDate_开头的输入，然后应用一个过滤器来评估当前元素与当前完整年份的关系。为此，我在/上拆分日期字符串，并取第三个项目，应该是年份。然后我将值转换为int并与当前年份进行比较。

您实际的过滤函数可能要比上面的函数更加稳定。例如，您可以使用moment.js进行比较。

- Mario Tacke

---

是的，这个可行。现在我必须想出最好的方法将其集成到我的Knockout代码中。这对我帮助很大。 - King Wilder

我刚刚想出了如何让它在最初的地方进行检查，我只是用10毫秒的延迟将其包装在setTimeout中。再次感谢。我将使用momentjs进行比较。 - King Wilder

Answer 2

我认为 ListDateValidation 中的 forEach 循环被执行得太早了。如果我从你的 jsfiddle 中理解正确，你是在实例化 FinancialViewModel 后立即运行它，但即使调用在其他所有操作之后进行，Knockout 也可能尚未更新 DOM。

有几种方法可以检查这一点，并防范这种情况。

但现在，为了检查是否确实如此，我建议在 self.ListDateValidation() 方法调用之前立即放置一些逻辑：在这个逻辑中，你应该有一个快速而简单的方法来确定这些元素中是否存在任何一个 - 你能否暂时（仅用于调试）给这些元素赋予 id 属性（只需增加一个 int），然后运行类似以下的内容

if (document.getElementById("test-id-1") !== null) {
    console.log("element found");
}

这将告诉您是否过早运行日期验证。

如果您需要一种确定元素何时被添加的方法，请搜索“javascript轮询dom元素已添加”。如果您不想麻烦，这里有一个简单的方法：

var elmnt,
    elmntId = "YOUR ELEMENT'S ID HERE",
    tmr = window.setInterval(function() {
        elmnt = document.getElementById(elmntId);
        if (elmnt) {
            window.clearInterval(tmr); // stop the search
            // do something
        }
    }, 15);

这个方法每15毫秒轮询DOM，直到找到具有指定ID的元素为止。15毫秒对应于浏览器运行的最小时间增量 - 如果此后已经降低，则很好，但在这种情况下没有人会注意到差异。

- awj

---

每个元素目前都使用Knockout的$index()动态获取Id。您关于KO在我检查时没有更新DOM是正确的，但我还没有找到一个好的检查方法。 - King Wilder

更新答案以提供检查的方法。 - awj