Question

两个相同的选择框

<select class="select">
  <option>- OPTION -</option>
  <option>1</option>
  <option>1</option>
</select>

<select class="select">
  <option>- OPTION -</option>
  <option>1</option>
  <option>1</option>
</select>

将- OPTION -替换为- SELECT -

$(".select option:first").text("- SELECT -");

上面的代码仅替换第一个选择框，而忽略第二个选择框。为什么？如何申请全部/任何？

https://jsfiddle.net/oLbfs901/2/

Answer 1

:first将仅选择组合在一起的所有选项的第一个元素。

:first-child将选择所有作为其父项的第一个孩子的元素。

$(".select option:first-child").text("- SELECT -");

有关速度的更新

下面，用户@kosmos建议使用.find()。与使用:first-child相比，此方法的性能要差得多。一些开发人员通常对性能不会三思而后行，因为它仍然非常快，但是它们可以累加起来。现在您知道存在更快的方法来达到相同的结果，所以我建议您使用此知识。

这是我用来确认的测试用例：http://jsperf.com/find-versus-first-child

Answer 2

尽管其他答案都是有效的，但您也可以输入

$(".select").find("option:first").text("- SELECT -");

获取所有.select元素，并为每个元素获取第一个option子元素。

Answer 3

您可以尝试以下代码

$(".select option:first-child").text("- SELECT -");

为多个项目的每个第一个孩子替换文本

3 个答案: