jquery如何选择当前元素之后的下一个元素

Question

<div id="main">
  <ul>
    <li><div></div></li>
  </ul>
  <div>needs to be selected</div>
  <div></div>
</div>

如何使用jquery仅选择主div中的第一个div？

或者

如何使用jquery仅选择<ul>之后的第一个div？

我尝试过这样做，但没有工作：

$('#main ul').next('div:first').addClass('my_class');

Answer 1

尝试使用child selector：

$('#main > div').addClass('my_class');

如果你有多个直接孩子div而想要第一个，你可以这样做：

$('#main > div').first().addClass('my_class');

最简单的方法是将一个类添加到您感兴趣的div中，以便您可以轻松识别它：

<div class="to-be-selected">needs to be selected</div>

然后

$('#main > div.to-be-selected').addClass('my_class');

甚至

$('#main .to-be-selected').addClass('my_class');

等

Answer 2

你可以这样做。

$("#main").find("ul").next().addClass("my_class");

希望它对你有用。

Answer 3

标准CSS选择器可以，不需要jQuery extravaganza：

div内#main，:first-of-type：

jQuery('#main > div:first-of-type').addClass('my_class').

div之后的ul，使用adjacent sibling selector。

jQuery('#main > ul + div').addClass('my_class');