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

How to apply css styles to dynamic JavaScript array?

本文关键字：动态 JavaScript 数组 应用于 样式 css      更新时间：2023-09-26

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

从本质上讲，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/

您可以在选择器中添加一个过滤函数，如下所示：

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

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

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

您实际的过滤函数可能比上面的要坚固得多。例如，可以包含moment.js进行比较。

我认为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对应于浏览器运行的最小平局增量——如果这一增量后来降低了，那就太好了，但没有人会注意到这种情况下的差异。

相关文章：