Следующие селекторы

("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:

Ссылки

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