JQuery选择所有不带选项的选择答案

【问题标题】：JQuery select all selects without optionsJQuery选择所有不带选项的选择
【发布时间】：2017-02-10 22:32:03
【问题描述】：

使用 JQuery 如何选择没有任何 <option> 子项的所有 <select> 项目。

我尝试了$(".MySelectsClass).not("option")，但没有成功。

【问题讨论】：

How to select elements which do not have a specific child element with JQuery的可能重复
您能否添加一个“minimal reproducible example” HTML 的 sn-p，以便我们查看您的无选项 <select> 元素的外观？
@DavidThomas 可以安全地假设<select></select> 吗？ <select> 没有 <option> 子项的项目。
@freedom: 可能，但也可能包含空格或<optgroup> 元素，这会影响选择器的选择。例如：select:empty 将是最简单的选择器，但如果有空格或任何后代，它将不起作用。这就是为什么我们不应该根据最少的信息进行假设或猜测。
@DavidThomas 你是对的，尤其是<optgroup>。 Milind 的狡猾编辑混淆了这个问题 - 它最初明确“没有，但现在是“是空的”，正如你所指出的出来，不是一回事。

【解决方案1】：

您可以将:not 与:has 选择器一起使用：

$(".MySelectsClass:not(:has(option)))

【讨论】：

【解决方案2】：

您可以使用:empty 选择器：

$('.MySelectsClass:empty').addClass('foo');

.foo {
  border: 1px solid red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select class="MySelectsClass"></select>
<select class="MySelectsClass">
  <option>Not empty!</option>
</select>
<select class="MySelectsClass"></select>

【讨论】：

这种方法比使用 not 和 has 对吗？
我不确定性能，如果您愿意，可以使用jsperf.com 进行测试。我个人更喜欢它，因为它简洁，并且意图更清晰
@nati 您的问题没有询问性能。通常，您需要澄清性能，除非您有一些小众案例，即您尝试每秒执行 1000 次，在这种情况下，您可能希望以不同的方式进行操作。

【解决方案3】：

您始终可以使用filter 应用任意过滤器，例如在这种情况下：

console.log($("select").length);

var emptyselects = $("select").filter(function(i) {
        return $(this).find("option").length === 0;
    });
console.log(emptyselects.length);
console.log(emptyselects.attr("id"));

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="s1">
</select>
<select id="s2">
<option>a</option>
</select>

【讨论】：