JQuery - Селектори (ієрархічні), ІТ Шеф

На цьому уроці ми познайомимося з ієрархічними селекторами, які використовуватимемо як аргумент функції jQuery ("селектор") для вибору елементів.

Види ієрархічних селекторів

Ієрархічні селектори можна розділити на 2 групи:

Селектори, що мають вертикальний зв'язок між елементами (предок-нащадок, батько-дитина).

Селектори мають горизонтальний зв'язок між елементами. У DOM-дереві горизонтальний зв'язок існує лише між сиблінгами. Сиблінги (сестри/брати) – це елементи, які мають одного з батьків.

ancestor descendant (предок нащадок) - вибирає елементи descendant, у яких один із предків є елементом ancestor. Іншими словами, селектор "ancestor descendant" вибирає елементи descendant, які є нащадками елемента ancestor.

Наприклад, вибрати всі елементи p , які розташовані всередині елементів div :

parent>child (батько>дитина) - вибирає елементи child, у яких батько є елементом parent. Іншими словами, селектор "parent>child" вибирає елементи child, які є дітьми елемента parent. На відміну від попереднього селектора, цей селектор працює лише з прямими зв'язками між елементами.

Наприклад, за допомогою jQuery знайдемо нащадків (усі елементи p), у яких батько є елементом div:

child (батько>дитина)" title="jQuery - parent>child (батько>дитина)">

Вибрати всі елементи li, які є дітьми елемента

:

prev+next (попередній+наступний) - вибирає елементи next, кожен з яких розташований безпосередньо (відразу) за елементом prev. Крім цього елементи prev і next повинні бути по відношенню один до одногодругові сиблінгами (тобто мати одного з батьків).

Наприклад, вибрати елементи p, кожен з яких розташований відразу ж за елементом div. Крім цього, елементи div і p стосовно один одному повинні бути сиблингами (братами, сестрами, сусідами), тобто. мати одного з батьків:

Вибрати всі елементи input, які розташовані відразу ж за елементом label. Крім цього елементи input і label повинні бути стосовно один одному сиблингами, тобто. мати одного з батьків.

сиблінг) - вибирає елементи sibling, які розташовані після елемента prev. Елементи prev і sibling би мало бути по відношенню друг до друга сиблінгами, тобто. мати одного з батьків.

Наприклад, вибрати елементи p, які розташовані після елемента div. Крім цього, елементи div і p стосовно один одному повинні бути сиблінгами, тобто. мати одного з батьків:

Наприклад, знайти всі елементи div , які по відношенню до елемента з сиблінгами і розташовані після нього:

---