Question

我有一个包含多个选择元素的html文件。需要的是使用jQuery更改select元素的每个第一个选项的文本。答案是$('select').children().first().html('changed!');。但这不会改变 all 第一个选项文本，只会改变第一个选项文本。

解决这个问题的正确方法是什么？

Answer 1

使用.each()：

$('select').each(function() {
    $(this).children().first().text('changed!');
});

请注意，在这种情况下，您应该使用text()，而不是html()，因为<option>元素的内容应该是纯文本。

或者，您可以直接选择第一个选项元素，避免使用children()和first()：

$('select>option:first-child').each(function() {
    $(this).text('changed!');
});

Answer 2

您也可以使用nth-child-selector选择第一个，第二个....

要更改所有选定元素的文字，您可以使用：

$('select option:nth-child(1)').text('changed');

或：

$('select option:nth-child(1)').text(function(index, text) {
    return 'changed';
});

这是因为jQuery提供了text-function。

摘录：

$(function () {
  //$('select option:nth-child(1)').text('changed');

  // or
  $('select option:nth-child(1)').text(function(index, text) {
    return 'changed';
  });
});

<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>

<select>
    <option value="volvo">Volvo</option>
    <option value="saab">Saab</option>
    <option value="mercedes">Mercedes</option>
    <option value="audi">Audi</option>
</select>
<select>
    <option value="volvo">Volvo</option>
    <option value="saab">Saab</option>
    <option value="mercedes">Mercedes</option>
    <option value="audi">Audi</option>
</select>
<select>
    <option value="volvo">Volvo</option>
    <option value="saab">Saab</option>
    <option value="mercedes">Mercedes</option>
    <option value="audi">Audi</option>
</select>

Answer 3

Jquery迭代descants有两个选项。你已经使用了child（），它不会递归迭代意味着只考虑直接的孩子。另一种是find（）递归迭代意味着所有的孙子都被认为与直接的孩子一起。我想如果你改变你的代码如下：

$('select').find("option").first().html('changed!');

请不要犹豫要求。希望帮助!!!

您需要迭代所有选择：

$("select").each(function(index,item){
         $(item).find("option").first().html('changed!');
});

选择多个选择元素的每个第一个选项

3 个答案: