javascript 数组不唯一

Question

我创建了一个 Asp.Net 用户控件。为了简单起见，一些 html 已被删除。

<asp:Panel ID="PanelInputControl" runat="server" CssClass="input-control input-period">
    <div  ID="InputWrapperMonth" runat="server" class="input-wrapper input-month">
        <asp:TextBox ID="TextBoxMonth" runat="server"
            MaxLength="2">
        </asp:TextBox>
    </div>
    <div  ID="InputWrapperYear" runat="server" class="input-wrapper input-year">
        <asp:TextBox ID="TextBoxYear" runat="server"
            MaxLength="4">
        </asp:TextBox>
    </div>
</asp:Panel>

我还有一个 JavaScript 函数，它根据数据输入的有效性添加类。我再次删除了一些多余的代码。

这是我构建 $el 的方法:

var $el = $(this).closest('.form').find('input[type="text"], input[type="checkbox"], select, textarea');

这是我调用的 JavaScript 函数:

function updateInputStatus($el) {

    var controls = [];

    $el.each(function () {

        $control = $(this).closest('.input-control');

        if ($.inArray($control, controls) < 0) {
            controls.push($control);
        }
    })
}

$el 是一个或多个输入控件 - 文本框、下拉列表等。在此示例中，假设 TextBoxMonth 和 TextBoxYear 是我们的对象 $el，并且触发 javascript 函数。

我想做的是构建一组独特的输入控制对象。在此示例中，PanelInputControl 将被发现两次，但我只想将其添加到数组中一次。

实际发生的是代码 $.inArray($control, controls) < 0无论情况如何，总是返回 -1 (也就是说在数组中找不到它)，我不明白为什么。

我还尝试在末尾添加此代码，var cleanArray = $.unique(controls); ，但重复项仍然保留在数组中。

我很困惑 - 有什么建议吗？

Answer 1

每次循环迭代时，您都会创建一个新的 jQuery 对象:

$control = $(this).closest('.input-control');

正是这些 jQuery 对象 .push() 到您的 controls 数组中。即使其中一些 jQuery 对象可能包含对相同 DOM 元素的引用，您与 $.inArray() 进行比较的是 jQuery 对象，它们都是不同的对象，因此不重复。

.closest() 方法本身不会返回重复项，因此您可以这样做:

controls = $el.closest('input-control');

那么您的 controls 变量将是一个 jQuery 对象，它只具有与 $el 中最接近的唯一 input-control 元素。

如果您特别想让 controls 成为一个 jQuery 对象数组，每个对象仅包含一个 input-control 元素，但没有重复项，您可以这样做:

controls = $.map($el.closest('input-control'), function(v,i) { return $(v); });