jQuery, .each() and children

Question

我正在尝试查找并设置页面上许多选择框的第一个选项。

$('ul#mygroup li select').each(function () {
  $(this +' option:nth-child(0)').attr('selected', 'selected');
});

第二行是出现问题的地方。我似乎无法针对每个组中的第一个选项来进行定位。

- vinman75

Answer 1

你不需要使用.each()；只需这样做：

$('#mygroup li select option:first-of-type').prop('selected', true);

- Ry-

---

使用jQuery的prop()会更准确。 - John Hartsock

Answer 2

您正在误用选择器。

您需要编写 $(this).children('option:first-child').attr('selected', true)。

您也可以直接编写 $('ul#mygroup li select').prop('selectedIndex', 0)。

- SLaks

Answer 3

你不应该将this连接起来，而应该将其用于作用域。

$('option:first',this).attr('selected','selected');

或者，简洁地说（在 .each 循环内）你在说什么。

$(this).find('option:first').attr('selected','selected');

虽然，正如其他人所提到的，没有必要使用.each。实际上，nth-child是专门为了避免使用.each而存在的。

- Brad Christie

Answer 4

尝试使用：

$('ul#mygroup li select').each(function () {
  $(this).children('option').first().attr('selected', 'selected');
});

- Galled

Answer 5

希望这对你有用。

<select name="type1">
    <option value="1">Option 1</value>
    <option value="2">Option 2</value>
    <option value="3">Option 3</value>    
</select>

<select name="type2">
    <option value="1">Option 1</value>
    <option value="2">Option 2</value>
    <option value="3">Option 3</value>    
</select>        

<select name="type3">
    <option value="1">Option 1</value>
    <option value="2">Option 2</value>
    <option value="3">Option 3</value>    
</select>     


$(function(){
    $('select').each(function () {
        $(this).children().first().attr('selected', 'selected');
        $(this).children().first().attr('style', 'color: blue');
    });
});

- Thein Hla Maw