将 jQuery/javascript 事件附加到元素时，我应该如何验证页面 DOM？答案

【问题标题】：How should I verify the page DOM when attaching jQuery/javascript events to elements?将 jQuery/javascript 事件附加到元素时，我应该如何验证页面 DOM？
【发布时间】：2010-07-21 19:05:56
【问题描述】：

我正在使用 jQuery 向 DOM 元素添加事件。当我这样做时，我经常使用选择器，从技术上讲，它可以收集匹配项的列表，而不仅仅是一个。例如使用 .children() 和 .find() 方法我可以找到 0、1 或许多匹配的 DOM 元素。

我是否只需要在附加事件时检查每个元素上的.size() == 1，还是有更简单的方法来执行此操作，例如如果预期数字不等于大小，则具有预期匹配列的选择器会失败？

我想这似乎很愚蠢，因为我也输出了 HTML 并且应该知道正确的答案，但是我有很多 DOM 操作正在进行，并且想知道是否有任何内置的健全性检查机制。

【问题讨论】：

如果您期望一个元素而得到两个元素，那么代码的行为是否会有所不同？还是您只想附加到其中一个元素？
好吧，理论上应该只有一个匹配，但是如果页面 DOM 被我的其他代码中的错误搞砸了，我想避免将事件附加到集合元素 - 在这种情况下，从 javascript 的角度来看，更喜欢非功能页面。

标签： javascript jquery dom javascript-events

【解决方案1】：

你可以写一个简单的扩展方法来做你想做的事，像这样：

jQuery.fn.ifCount = function(count) {
  return this.length === count ? this : $();
};

然后在您的代码中而不是每次都使用if，您可以在链中调用它，例如：

$("div").ifCount(2).css({ color: 'red' });

如果计数为 2，则继续执行该集合并在元素上运行 .css()。如果计数不是 2，则返回一个新的 empty 集，因此 .css() 什么都不运行。

如果您只想绑定到任意数量的元素而不关心有多少，则无需检查任何内容，您只需这样做：

$("div").click(function() { .... });

如果有 0、1 或 400 个 <div> 元素，则此方法有效，没关系。 jQuery 的默认行为是仅使用匹配的元素继续链...如果链中的函数为 0，则链中的函数仅在没有元素上执行，但它不会引发错误。这也不是特定于事件处理程序，它适用于任何 jQuery 代码（以及正确编写的插件）。

【讨论】：

【解决方案2】：

您无需检查它们。只需使用该方法并对其调用绑定即可。如果它返回一个或多个元素，则所有元素都将绑定事件。如果它不返回任何元素，它也不会抛出任何错误。

【讨论】：

【解决方案3】：

您可以将选择放入一个局部变量中，然后测试大小：

var items = $(".items");

if (items.length == 1) {
    // Do you regular stuff here
} else if (items.length > 1) {
    // Log error to the console
    // Example: console.log('Too Many Items!!'); <- with firebug ofcourse
} else {
    // console.log("Too Few Items");
}

您可以将错误记录到控制台，然后通过执行以下操作更正问题以进一步执行代码：

console.log('Too Many Items!!');
items = items.first();

【讨论】：

【解决方案4】：

我认为您应该设计选择器以满足您的需求。如果目标选择一个元素 - 使用 id 选择器或返回一个元素或零元素的选择器 $("#").click(function_callback)，如果您需要更多 - 使用其他选择器。 http://api.jquery.com/category/events/

无论如何，当您以 jQuery 方式 $("").click（或其他事件）附加事件时，您声明所有符合选择器条件的元素都订阅了该事件。

【讨论】：

【解决方案5】：

大多数情况下，您可以一次应用函数： $("...").someting();

您也可以尝试： $("...").each(function() { $(this).something(); });

【讨论】：