Question

在网站上工作时，我通常会在我的所有页面中使用1个JavaScript文件，并使用函数＆amp;希望是独特的名字来区分一切。有时，我想在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

为什么不这样做？

$("div.hideMe").hide();

（旁注，如果它们共享一个共同的css文件，也可以用css轻松完成）

Answer 2

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

$(".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才能使该选择器正常工作。

带有过滤器的jQuery标签会引发错误

2 个答案: