1

我正在尝试更改一组 html 选择元素的选定选项。我给了它们所有相同的类，以便我可以使用 jQuery 一次选择它们，但由于某种原因，它只更改了类中的第一个元素。这是一个演示：http: //jsfiddle.net/bwhitney/xP4FP/1/

这里只是代码：

<select id="config1" class="config">
<option>foo</option>
<option selected>bar</option>
</select>

<select id="config2" class="config">
<option>foo</option>
<option selected>bar</option>
</select>

<select id="config3" class="config">
<option>foo</option>
<option selected>bar</option>
</select>

使用 jQuery：

$('.config option:eq(0)').attr('selected', 'selected');​

这段代码的结果是只有第一个选择元素会foo选择选项。第二个和第三个仍然会bar被选中。我认为使用 jQuery 选择一个类会选择具有该类的所有项目。有没有办法用一个选择器选择所有这三个？

作为对可能答案的先发制人的回应（我相信有人会考虑提出这个建议）：我知道我可以只编写一个 for 循环来选择每个$('#config' + i). 如果无法一次全部选择它们，这就是我最终要做的。

4

6 回答 6

3

尝试使用nth-child：

$('select option:nth-child(1)').prop('selected', 'selected');

示例：http: //jsfiddle.net/K4mnx/

于 2012-07-11T17:31:04.010 回答
3

代替

$('.config option:eq(0)').attr('selected', 'selected');​

你必须使用

$('.config option:nth-child(1)').attr('selected', 'selected');​​​​​​​​​​​​​​​​​​

:eq()和之间的根本区别:nth-child()在于

:eq()

Select the element at index n within the matched set.

首先根据前面的表达式匹配元素，:eq()即.config option在您的情况下。

如果你这样做，console.log($('.config option'));你会得到以下

[ <option>​foo​&lt;/option>​, <option selected>​bar​&lt;/option>​, <option>​foo​&lt;/option>​, <option selected>​bar​&lt;/option>​, <option>​foo​&lt;/option>​, <option selected>​bar​&lt;/option> ​]

并:eq(0)过滤这个匹配的集合，因此只返回第一个元素，即<option>foo</option>.

:nth-child()

Selects all elements that are the nth-child of their parent.

过滤时会考虑:nth-child()父元素。

下面的命令最好地证明了这种差异

console.log($('.config option:eq(0)'));

和

console.log($('.config option:nth-child(1)'));

正如预期的那样，第一个命令返回[<option>​foo​&lt;/option>​]，因为它是匹配的元素集的第一个元素。

第二个命令，返回

[ <option>​foo​&lt;/option>​, <option>​foo​&lt;/option>​, <option>​foo​&lt;/option>​ ]

.config因为它选择了 type的所有第一个孩子option。

所有其他答案当然是绝对正确的。

我只是想我会添加一些解释。:)

于 2012-07-11T17:58:54.333 回答
1

尝试使用.each()这个：

$('.config').each(function(index){
    $(this).children('option:eq(0)').attr('selected', 'selected')
});

​​​​​<a href="http://jsfiddle.net/xP4FP/3/" rel="nofollow">JSFiddle

于 2012-07-11T17:28:30.040 回答
1

将 eq(0) 更改为：

$('.config option:first-child').attr('selected', 'selected');​
于 2012-07-11T17:30:17.910 回答
0

也许是这样：

$('.config').each(function(){ this.options[0].selected = 'selected'; });
于 2012-07-11T17:28:05.160 回答
0

AFAIK，你只能用循环来做，否则它只会更新第一个。http://jsfiddle.net/xP4FP/2/

$('.config option:eq(0)').each(function(i,el){$(el).attr('selected', 'selected')};
于 2012-07-11T17:29:21.750 回答