Поиск части элементов лежащих после выбранных

.nextUntil()

Осуществляет поиск всех элементов, лежащих начиная от одних заданных элементов и заканчивая другими. Метод имеет один вариант использования:

.next([selector]):jQuery1.4

Возвращает все элементы, которые лежат после каждого из выбранных, но не дальше первого элемента, удовлетворяющего заданному селектору selector. Если селектор не задан, результат будет аналогичен использованию nextAll()

Замечание: nextUntil ищет нужные элементы, только на общих уровнях дерева DOM с выбранными элементами. То есть, только внутри непосредственных родителей выбранных элементов.

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

$("div").nextUntil(".lBlock") вернет элементы, которые находятся после каждого div-элемента на странице, но не дальше первого элемента с классом lBlock.

В действии

Выясним, какие элементы в списках идут после элементов с классом start и до элементов с классом stop:

~lt~!DOCTYPE html~gt~
~lt~html~gt~
~lt~head~gt~
  ~lt~style~gt~
    ul{
	float:left; 
	list-style-type:none; 
	margin:5px; 
    }
  ~lt~/style~gt~
    ~lt~script src="//code.jquery.com/jquery-latest.min.js"~gt~~lt~/script~gt~
~lt~/head~gt~
~lt~body~gt~
~lt~ul~gt~
  ~lt~li class="start"~gt~Элемент 1-a~lt~/li~gt~
  ~lt~li~gt~Элемент 1-b~lt~/li~gt~
  ~lt~li~gt~Элемент 1-c~lt~/li~gt~
  ~lt~li class="stop"~gt~Элемент 1-d~lt~/li~gt~
~lt~/ul~gt~

~lt~ul~gt~
  ~lt~li class="start"~gt~Элемент 2-a~lt~/li~gt~
  ~lt~li~gt~Элемент 2-b~lt~/li~gt~
  ~lt~li~gt~Элемент 2-c~lt~/li~gt~
  ~lt~li~gt~Элемент 2-d~lt~/li~gt~
~lt~/ul~gt~

~lt~ul~gt~
  ~lt~li~gt~Элемент 3-a~lt~/li~gt~
  ~lt~li class="start"~gt~Элемент 3-b~lt~/li~gt~
  ~lt~li class="stop"~gt~Элемент 3-c~lt~/li~gt~
  ~lt~li~gt~Элемент 3-d~lt~/li~gt~
~lt~/ul~gt~

~lt~script~gt~
    $(".start").nextUntil(".stop")
      .css("background-color", "red")
~lt~/script~gt~
~lt~/body~gt~
~lt~/html~gt~

Ссылки

Поисковые ключи:
  • следующие элементы
  • элементы следующие после выбранных
  • nextUntil()
  • .nextUntil