代码之家  ›  专栏  ›  技术社区  ›  user3108268

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

  •  1
  • user3108268  · 技术社区  · 6 年前

    两个相同的选择框

    <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/

    3 回复  |  直到 6 年前
        1
  •  8
  •   Roy    6 年前

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

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

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

    关于速度的更新

    下面,user@kosmos建议使用 .find() . 这种方法的性能比使用 第一个孩子 . 有些开发人员通常不会再想性能,因为它仍然很快,但这些都可以加起来。现在你知道有更快的方法来达到同样的结果,所以我建议使用这些知识。

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

        2
  •  2
  •   kosmos    6 年前

    虽然其他答案是有效的,但您也可以键入

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

    得到一切 .select 元素,对于每个元素,获取第一个 option 孩子。

        3
  •  1
  •   Hira Kumar Maharjan    6 年前

    您可以尝试以下代码

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