javascript - 如何使用 jquery get select 元素具有 MULTIPLE 模式和反向

Question

我今天的工作堆积如山。我的堆栈在这里:

我有一个 select html 元素，它有 MULTIPLE 模式:

<select class="test" MULTIPLE></select>

(MULTIPLE 模式也输入为:multiple="multiple"我包括在这里)

<select class="test" multiple='multiple'></select>

现在我只想在许多普通选择元素中选择这个元素:

<select class="test" ></select>
<select class="test" ></select>
<select class="test" multiple='multiple'></select>
<select class="test"> </select>

我是这样使用 jQ 的:

$(".test[!MULTIPLE]").css('border','solid 1px red');

但是所有选择的元素都有红色边框；

我怎样才能只选择多个元素。并选择非多重模式？

Answer 1

试试这个:

$(".test:not([multiple])").css('border','solid 1px red');

编辑:正如 Reigel 提到的，如果避免使用 jQuery 伪选择器，您可以获得相同的结果集并获得更好的性能:

$(".test").not([multiple]).css('border','solid 1px red');

编辑 2:从评论中可以看出，一些快速测试表明，至少对于我们中的一些人来说，第二个选项实际上更慢。进一步挖掘，根据 css3.info ，对 :not CSS3 选择器的原生支持比我想象的更广泛。假设 jQuery 在可用时使用 native 选择器，这可能会造成所有差异(对不起 IE7)。

编辑 3:进一步感谢@nickf，他在 IE8 中运行了这些测试，发现两者之间没有实质性区别。鉴于所有这些歧义，明智的做法是在目标浏览器中测试 jQuery 伪选择器或 :not/.not 特别是是否陷入代码热点对性能有重大影响的地方(如果你有一个受控的目标浏览器环境)。

但如果您的目标是所有浏览器，那么最好的建议似乎是使用最适合您的代码的内容，并避免过早优化。