Смежные селекторы

("prev + next")1.0

Соответствует элементам, удовлетворяющим селектору next и расположены непосредственно за элементами, удовлетворяющими селектору prev.

Примеры использования:

$('div + span') вернет span-элементы, которые расположены непосредственно за div-элементами.
$('div + .lBlock') вернет элементы с классом lBlock, которые расположены непосредственно за div-элементами.
$('#foot + *') вернет элемент, находящийся за элементом с идентификатором foot.

Помимо селектора ("prev + next") существует еще ("prev ~ next"). Он возвращает не только непосредственные элементы, расположенные после prev, а все элементы, расположенные после prev. Это различие демонстрируется в примере 2.

В действии

Пример 1

Выясним, что же идет после обеда (выделим красной границей элемент идет после элемента с классом lunch):


Пример 2

Найдем третий p-элемент внутри каждого li-элемента, на странице. После чего выделим следующий за каждым из них элементы (красной границей). Кроме этого, выделим синими звездочками элементы, найденные с помощью prev~next, вместо prev+next:

Ссылки

Поисковые ключи:
  • смежные селекторы
  • элемент следующий непосредственно после заданного
  • следующие элементы