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

Question

我有一个包含多个select元素的html文件。我们需要的是select元素的每个第一个选项的文本都是用jQuery改变的。给出的答案是$('select').children().first().html('changed!');。但这并没有改变全部第一个选项文本，只有第一个。

这是怎么回事？

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迭代。你已经使用了不迭代迭代的子节点（），意味着只考虑直接子节点。另一个是find（）递归迭代，意味着所有孙子节点都与直接子节点一起考虑。我认为如果你改变你的代码如下：

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

请不要犹豫地问。希望帮助！

您需要遍历所有的选择：

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