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

Question

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

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

我正在尝试将样式添加到值小于所需值的输入中。底线是，我知道元素对于 DOM 来说是动态的，但我无法访问它们，因此我可以应用样式。 jQuery 和纯 JavaScript 都试过了，都无法访问新添加的字段。

我该怎么做？

我创建了一个非常复杂的小提琴来创建输入。但我不知道如何为那些值小于当前年份的输入设置样式。

我正在尝试将 .k-invalid 样式添加到值小于当前年份的 NextPaymentDate 输入中。

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

以上都行不通。

http://jsfiddle.net/kahanu/rdb00n76/9/

Answer 1

您可以像这样向选择器添加过滤器功能：

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

小提琴：http://jsfiddle.net/rdb00n76/10/

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

您的实际过滤器功能可能比上面的要可靠得多。例如，您可以添加moment.js 以进行比较。

Answer 2

我认为ListDateValidation 中的forEach 循环执行得太快了。如果我对您的 jsfiddle 的理解是正确的，那么您会在实例化 FinancialViewModel 后立即运行它，但即使调用是在其他所有操作之后进行的，此时 Knockout 可能还没有更新 DOM。

有几种方法可以检查这一点，如果正确，请注意这一点。

但是现在，要检查 是不是，我建议在 self.ListDateValidation() 方法调用之前放置一些逻辑：在这个逻辑中，你应该有一个快速而肮脏的方法确定是否存在这些元素中的任何一个 - 你可以暂时（仅用于调试）给这些元素id 属性（只需增加一个 int）然后运行类似

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

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

如果您需要确定何时添加元素的方法，请搜索“javascript poll dom element added”。如果你不介意，这里有一个粗略的方法：

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 的元素存在时停止。 15ms 对应于浏览器将运行的最小 tie 增量 - 如果这已经降低了那么很好，但没有人会注意到这种情况下的差异。