Привязка к элементам документа

Выполнить поиск элемента с учетом заданного отношения к другому элементу HTML-документа можно следующими способами:

  • Элемент1 Элемент2 — находим Элемент2, который располагается внутри контейнера Элемента1:
$('div a').css('color', 'red');

Цвет текста ссылки станет красным, если тег <a> находится внутри тега <div> (может быть потомком, внуком, правнуком и т. д.):

<div>
   <a href="link.html">Ссылка 1</a>
   <p><a href="link.html">Ссылка 2</a></p>
</div>

В этом примере обе ссылки будут красного цвета;

  • Элемент1 > Элемент2 — находим Элемент2, который является дочерним для Элемента1:
$('div > a').css('color', 'red');

Цвет текста ссылки станет красным, если тег <a> находится внутри тега <div> и не вложен в другой тег:

<div>
   <a href="link.html">Ссылка 1</a>
   <p><a href="link.html">Ссылка 2</a></p>
</div>

В этом примере только первая ссылка станет красного цвета, т. к. вторая ссылка расположена внутри тега <p>;

  • Элемент1 + Элемент2 — находим Элемент2, который является соседним для Элемента1 и следует сразу после него:
$('div + a').css('color', 'red');

Цвет текста ссылки станет красным, если тег <a> следует сразу после тега <div>:

<div>Текст</div>
<a href="link.html">Ссылка</a>
  • Элемент1 ~ Элемент2 — находим Элемент2, который следует после Элемента1, причем необязательно сразу:
$('div ~ a').css('color', 'red');

Цвет текста ссылки станет красным, если тег <a> следует после тега <div>:

<div>Текст</div>
<p>Текст абзаца</p>
<a href="link1.html">Ссылка 1</a><br>
<a href="link2.html">Ссылка 2</a><br>
<p><a href="link3.html">Ссылка 3</a></p>
<a href="link4.html">Ссылка 4</a>

В этом примере ссылки 1, 2 и 4 станут красного цвета. Ссылка 3 не станет красного цвета, т. к. расположена внутри тега <p>.

При необходимости можно составлять выражения из нескольких селекторов:

$('div p a').css('color', 'red');

Цвет текста ссылки станет красным, если тег <a> расположен внутри тега <p>, а тот в свою очередь вложен в тег <div>:

<div>
   <a href="link1.html">Ссылка 1</a>
   <p>
      <a href="link2.html">Ссылка 2</a>
   </p>
</div>

В этом примере только ссылка 2 будет красного цвета.

Учебник по jQuery и AJAX
Учебник по jQuery и AJAX в формате PDF

Помощь сайту

ЮMoney (Yandex-деньги): 410011140483022

ПАО Сбербанк:
Счет: 40817810855006152256
Реквизиты банка:
Наименование: СЕВЕРО-ЗАПАДНЫЙ БАНК ПАО СБЕРБАНК
Корреспондентский счет: 30101810500000000653
БИК: 044030653
КПП: 784243001
ОКПО: 09171401
ОКОНХ: 96130
Скриншот реквизитов