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

Question

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

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

我正在尝试向值小于所需值的输入添加样式。最重要的是，我知道元素对于 DOM 是动态的，但我在访问它们时遇到了问题，因此我无法应用样式。我已经尝试了 jQuery 和纯 JavaScript，但我无法访问新添加的字段。

我该怎么做？

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

我正在尝试将 .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');

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

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

您的实际过滤器功能可能比上面的功能更可靠。例如，您可以包括 moment.js进行比较。