jquery - 查找所有可见的选择，正好有 4 个选项

Question

使用 4 个选项获取所有选择的最短方法是什么？

否则我将不得不循环每个select并获取$find('option').length == 4

这似乎不起作用:

$.grep($("select:visible"), function () {
    return $(this).find('option').length == 4;
});

Answer 1

您可以使用 :has() 的组合, :eq()和 :not()选择器。

表达式 :has(option:eq(3)) 将定位具有 alt-lest 4 option 子元素和表达式 :not(: has(option:eq(4))) 将排除有 5 个 option 子元素的元素。

$("select:visible:has(option:eq(3)):not(:has(option:eq(4)))").css('color', 'red')

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select>
  <option>1</option>
  <option>2</option>
  <option>3</option>
</select>
<select>
  <option>1</option>
  <option>2</option>
  <option>3</option>
  <option>4</option>
</select>
<select>
  <option>1</option>
  <option>2</option>
  <option>3</option>
  <option>4</option>
  <option>5</option>
</select>

<小时/>

您还可以使用.filter()

$("select:visible").filter(function() {
  return $(this).find('option').length == 4;
}).css('color', 'red')

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select>
  <option>1</option>
  <option>2</option>
  <option>3</option>
</select>
<select>
  <option>1</option>
  <option>2</option>
  <option>3</option>
  <option>4</option>
</select>
<select>
  <option>1</option>
  <option>2</option>
  <option>3</option>
  <option>4</option>
  <option>5</option>
</select>