$("selector").find(":psuedo-class") 没有 return 想要的元素

Question

我有以下声明：

var optionsWithAttribute = $(element).find("option[data-attribute]");

我现在想从那个集合中获取选定的选项，所以我写：

var selectedOptions = optionsWithAttribute.find(":selected");

但是这会产生有效的选择器：

"option[data-attribute] :selected"

显然什么都不匹配（感谢 jquery.whiny 帮我解决了这个问题）。正确的选择器是：

"option[data-attribute]:selected"

（注意 ] 后缺少 space）。

显然这是因为对 .find() 的后续调用会在前面加上 space 以便（例如）表达式 $("select").find("option") 产生选择器 select option 而不是 selectoption。要么我做错了什么 - 在这种情况下请教育我 - 或者 .find() 应该更改为不插入 space 如果传入的选择器是伪 class （即以冒号开头）。

Answer 1

您需要使用过滤器，因为 optionsWithAttribute 包含 option 元素，find() 将查找匹配的后代元素

var selectedOptions = optionsWithAttribute.filter(":selected");

Answer 2

.find() selects 父元素的子元素，您需要使用 .filter() 它将只给您具有 select 属性的项目

当您使用此代码时 var selectedOptions = optionsWithAttribute.find(":selected"); jquery 将搜索所有具有属性 select 的元素，这些元素来自标签选项 (optionsWithAttribute)

Answer 3

尝试使用filter()方法

Reduce the set of matched elements to those that match the selector or pass the function's test.

var selectedOptions = optionsWithAttribute.filter(":selected");

Answer 4

"option[data-attribute] :selected"
which obviously matches nothing

绝对是因为不正确，在options里面找不到selected选项，所以改成：

var optionsWithAttribute = $(element).find("option[data-attribute]:selected");
console.log(optionsWithAttribute)

$("selector").find(":psuedo-class") 没有 return 想要的元素

$("selector").find(":psuedo-class") does not return desired elements

javascript

jquery

jquery-selectors