javascript - 为多个项目的每个第一个 child 替换文本

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