javascript - 带有过滤器的 jQuery 标签会抛出错误

Question

在网站上工作时，我通常在所有页面上使用 1 个 JavaScript 文件，并使用函数和希望唯一的名称来区分所有内容。有时，我想在 DOM 元素或其祖先或后代上调用函数，并且我可能想使用过滤器。例如，我可能会使用

var stylesheets = $(".stylesheet").data("css").split("");

如果有任何带有 stylesheet 类的元素，此变量将存储一个表示所有元素的 data-css 属性的数组(在我的页面上，会发生成为唯一一个)。但是，当页面上没有元素具有 stylesheet 类时，Firebug 会抛出错误，

TypeError: $(...).data(...) is undefined


var stylesheets = $(".stylesheet").data("css").split(" ");

& .js 文件的其余部分不会执行。

在某些情况下，我希望有一些标签可以调用函数，但我使用的过滤器不适用于其中任何一个。最常见的情况是我在一个页面上使用某些功能，而在另一页面上使用其他功能。这些函数的过滤器在某些页面上会满足，但在其他页面上不会满足，并且我的代码都不会执行。这种情况我该怎么办？我不想使用不必要的代码，例如将 if 语句与 .length 一起使用，因为那样会导致过多。

Answer 1

修复您的选择器以实际仅抓取符合您条件的项目:

$(".stylesheets[data-css]").data("css").split(" ");

您可以read more about jQuery's selectors here .

编辑

因为您在这里担心的是选择器不存在，并且因为 split 是一个普通的 Javascript 方法，并且缺乏 jQuery 方法在处理时通常附带的一些“安全”机制空集合，这可能是最简洁的方法:

var cssAttr = $(".stylesheet").data("css");
var stylesheets = (cssAttr) ? cssAttr : null;

请注意，我只决定使用 cssAttr 变量访问 DOM 一次。我建议您在这里做同样的事情，以防止为同一件事两次触摸 DOM。

现在，如果您确实想要优化，并且不打算拥有多个匹配选择器(根据您的代码看来确实是这种情况)，那么您可以随时跳过此处的 jQuery。你并没有真正做任何普通 JS 无法做的事情，jQuery 并没有真正带来任何东西，你将受益于这里稍微更快的选择器:

var cssAttr = document.getElementsByClassName("stylesheet")[0].dataset.css;
var stylesheets = (cssAttr) ? cssAttr : null;

请注意，您需要定位 IE9 and above让该选择器正常工作。