jquery:[]选择器？

Question

给定一个SELECT元素:

<select>
    <option>foo</option>
    <option>bar</option>
    <option>baz</option>
</select>

我想选择值为"bar"的OPTION元素.

这不起作用:

$('option[text="bar"]').attr('selected', true);

但是,这确实有效:

$('option:[text="bar"]').attr('selected', true);

为什么？

现场演示:http://jsfiddle.net/YbfqZ/2/

Answer 1

这种行为的原因是你的冒号打破了选择器querySelectorAll因为它无效.

因此,它默认为Sizzle,它可以容忍冒号,即使它在技术上不受支持(这意味着它可能会在未来中断).Sizzle将检查属性和属性.因此,它不会找到text属性,但会找到元素的text属性<option>.

这是一个示例,演示Sizzle将匹配属性而不仅仅是与其attribute-equals选择器的属性匹配.

代码示例:

  // set a custom property on the last option
$('#id option').slice(-1)[0].customProp = 'customValue';

  // breaking the selector with : we default to Sizzle,
  //    which matches our custom property
$('#id option:[customProp="customValue"]').attr('selected', true);

编辑: 我的示例链接先前引用了别人的示例,因为我键入了错误的修订号.固定.