Question

我试图通过学习使用nth-child选择器来提高我的jQuery技能，但运气不佳。我确定我只是做了一些稍微错误的事情，我会再次就这个问题提出一个跟进问题，所以任何帮助都会受到赞赏。

我认为下面的代码会在下拉菜单中选择“Saab”和“Audi”，但它的作用是返回“source”select元素select#carsmenu。我究竟做错了什么？

$(document).ready(function() {
      console.log($('#carsmenu:nth-child(odd)').prop('selected', true));
});

<select multiple id="carsmenu">
  <option value="volvo">Volvo</option>
  <option value="saab">Saab</option>
  <option value="mercedes">Mercedes</option>
  <option value="audi">Audi</option>
</select>

Answer 1

:nth-child()选择器应该在您想要选择它的目标元素之后写入。

$('#carsmenu > :nth-child(odd)').prop('selected', true);

＆＃13;

$('#carsmenu > :nth-child(odd)').prop('selected', true);

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select multiple id="carsmenu">
  <option value="volvo">Volvo</option>
  <option value="saab">Saab</option>
  <option value="mercedes">Mercedes</option>
  <option value="audi">Audi</option>
</select>

＆＃13;

您也可以使用:odd选择器

$('#carsmenu > :odd').prop('selected', true);

＆＃13;

$('#carsmenu > :odd').prop('selected', true);

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select multiple id="carsmenu">
  <option value="volvo">Volvo</option>
  <option value="saab">Saab</option>
  <option value="mercedes">Mercedes</option>
  <option value="audi">Audi</option>
</select>

＆＃13;

Answer 2

使用#carsmenu:nth-child(odd)这段代码，您选择奇数的选择元素，您真正想要的选择select元素的子元素，在您的情况下是<option>标记，您可以使用下面的代码用于选择子元素：

// This will select volvo and mercedes because of 0-based of nth-child
// another option is `even` which select saab and audi 
$('#carsmenu option:nth-child(odd)')

＆＃13;

$(document).ready(function() {
  console.log($('#carsmenu option:nth-child(even)').prop('selected', true));
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<select multiple id="carsmenu">
  <option value="volvo">Volvo</option>
  <option value="saab">Saab</option>
  <option value="mercedes">Mercedes</option>
  <option value="audi">Audi</option>
</select>

＆＃13;

Answer 3

%_Host@User> cat td_apple
appleappleapplorangeorangeorangeo:appleappleapplorangeorangeorangeo:appleappleapplorangeorangeorangeo
foofoofoofoofobarbarbarbarbarbarb:foofoofoofoofobarbarbarbarbarbarb:foofoofoofoofobarbarbarbarbarbarb
xxxxxxxxxxxxxxooooooooooooooooooo:ppppppppppppppqqqqqqqqqqqqqqqqqqq:nnnnnnnnnnnnnnttttttttttttttttttt
%_Host@User>

$(document).ready(function() {
  //It is possible as this,
  console.log($('#carsmenu :nth-child(odd)')); //Volov & Mercedes, it starts counting from the first child "Volvo" and takes every second "Mercedes"--> ...
  console.log($('#carsmenu :odd')); //Saab & Audi, it starts counting from element 0, which does not exist, and takes every second --> "Saab" --> "Audi" --> ...

  //but for a better readability:
  console.log($('#carsmenu option:nth-child(odd)')); //Volov & Mercedes
  console.log($('#carsmenu option:odd')); //Saab & Audi

  //add the ".prop('selected', true);" to which you want to have selected.
});

如何在jquery中使用nth-child（）选择奇数“选项”？

3 个答案: