Question

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

基本上，Ajax调用接收带有数据数组的JSON有效负载。然后，一些KnockoutJS代码会通过DOM来动态添加行。

我正在尝试将值添加到值小于所需值的输入。最重要的是，我知道元素是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_开头的所有输入，然后应用一个过滤器来评估当前元素与当前整年的关系。为此，我将日期字符串拆分为/，并取第3项应该是年份。然后我将值转换为int并比较当前年份。

您的实际过滤功能应该比上面的功能更加稳固。例如，您可以包含moment.js进行比较。

Answer 2

我认为forEach内的ListDateValidation循环过早执行。如果我对你的jsfiddle的理解是正确的，那么你在实例化FinancialViewModel时就会运行它，但即使调用在其他所有内容之后，Knockout也可能没有更新DOM。

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

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

这样的东西

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

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

如果您需要一种确定何时添加元素的方法，请搜索“添加了javascript poll dom element”。如果你不能打扰，这是一个粗略的方法：

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

此方法每隔15ms轮询一次DOM，然后在发现具有指定ID的元素存在时停止。 15ms对应于浏览器运行的最小连接增量 - 如果此后已经降低了那么好，但没有人会注意到这种情况下的差异。

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

2 个答案: