jquery как выбрать следующий элемент после текущего элемента

Question

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

Как выбрать, используя jquery, только первый div внутри главного div?

Или

Как я могу выбрать, используя JQuery, только первый DIV после <ul>?

Я пытался сделать это, но не получилось:

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

Answer 1

Попробуйте с child selector:

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

Если у вас есть более одного прямого ребенка div и хотите первый, вы можете do:

$('#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 феерии:

Первые 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');