選擇多個選擇元素的每個第一個選項

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!'); 
});