Оглавление

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

Выполнить поиск элемента с учетом заданного отношения к другому элементу HTML-документа можно следующими способами.
•    Элемент1 Элемент2 — находим  Элемент2,  который располагается внутри контейнера Элемента1

$("div a") .css("color", "red");

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

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

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

<div>
   <a href="linkl.html">Ссылка l</a><br>
   <span><a href="link2.html">Ссылка 2</a></span>
</div>

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


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

<div>Текст</div><a href="link.html">Ссылка</a>


•    Элемент1 ~ Элемент2 — находим Элемент2, который следует после Элемента1, причем необязательно сразу.
$("div ~ a") .css("color", "red");

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

<div>Текст</div>
<span>Текст</span><br>
<a href="linkl.html">Ссылка  l</a><br>
<a href="link2.html">Ссылка  2</a><br>
<span><a href="link3.html">Ссылка  3</a></span><br>
<a href="link4.html">Ссылка  4</a><br>

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


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

$("div span a") .css("color", "red");


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

<div>
   <a href="linkl.html">Ссылка l</a><br>
   <span>
      <a href="link2.html">Ссылка 2</a><br>
   </span>
</div>


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

 









Комментарии принадлежат их авторам. Мы не несем ответственности за их содержание.
Отправитель Нити