从 jQuery 移植到 Zepto 时出现无效选择器错误

Question

我正在尝试在 jQuery 中使用 Zepto 来代替 vex.js 插件。

 ".vex:not(".vex-closing") .vex-content"

我在执行上述选择器时遇到错误。

 error performing selector: ".vex:not(".vex-closing") .vex-content" zepto.min.js:3
 Uncaught SyntaxError: Failed to execute 'querySelectorAll' on 'Document': '.vex:not(".vex-closing") .vex-content' is not a valid selector. 

我该如何解决这个问题。

这是从 vex.js 中提取的代码

 getAllVexes: function() { 
    return $("." + vex.baseClassNames.vex + ":not(\"." + vex.baseClassNames.closing + "\") ." + vex.baseClassNames.content);
 }

Answer 1

:not() 选择器中通常不允许使用引号，因为它接受选择器，而不是字符串。不管出于什么原因，quotes are allowed in jQuery/Sizzle's implementation of :not()。

您应该从选择器字符串中删除 \" 标记，以便它在 document.querySelectorAll() 中工作（Zepto 似乎直接调用它，并且专门用于选择器匹配 - 如果我错了，请纠正我）：

return $("." + vex.baseClassNames.vex + ":not(." + vex.baseClassNames.closing + ") ." + vex.baseClassNames.content);

这将产生一个像 .vex:not(.vex-closing) .vex-content 这样的选择器，它是一个有效的 CSS 选择器。