Этот сайт использует cookies. Продолжение работы с сайтом означает, что Вы согласны!
Привязка поиска к другим элементам
Привязать поиск элемента к другим элементам HTML-документа можно с помощью следующих методов.
find(<Селектор>)
— находит элементы, которые располагаются внутри контейнера. Возвращает новую коллекцию. Найдем все теги<div>
, затем внутри них все теги<span>
и изменим текст внутри этих тегов.
$("div").find("span").html("Новый текст");
<div>
<u><span>Текст 1</span></u>
<span>Текст 2</span>
</div>
children([<Селектор>])
— возвращает все дочерние узлы. Выделим все элементы внутри тегов<div>
.
$("div").children().css("color", "red");
<div>
<u><b>Выделенный</b> текст 1</u>
<b>Текст 2</b>
</div>
В результате будет выделен текст, который расположен между тегами <u>
и <b>
.
Если в качестве необязательного параметра указать селектор, то будут возвращены дочерние узлы, которые соответствуют селектору.
$("div").children("b").css("color", "red");
<div>
<u><b>Выделенный</b> текст 1</u>
<b>Текст 2</b>
</div>
В этом примере будет выделен только фрагмент "Текст 2", так как второй тег <b>
расположен внутри тега <u>
.
parent([<Селектор>])
— находит контейнер, в который вложен элемент. Получим любые теги, в которые вложены теги<span>
, и выведем новый текст вместо их содержимого.
$("span").parent().html("Это элемент-родитель");
<div><span>Текст</span></div>
<b><span>Текст</span></b>
<b><u>Текст</u></b>
Результат:
<div>Это элемент-родитель</div>
<b>Это элемент-родитель</b>
<b><u>Текст</u></b>
Если в качестве необязательного параметра указать селектор, то будут возвращены узлы, которые ему соответствуют. Найдем все теги <div>
, в которые вложены теги <span>
и выведем новый текст вместо их содержимого.
$("span").parent("div").html("Это элемент-родитель");
<div><span>Текст</span></div>
<b><span>Текст</span></b>
<b><u>Текст</u></b>
Результат будет выглядеть следующим образом:
<div>Это элемент-родитель</div>
<b><span>Текст</span></b>
<b><u>Текст</u></b>
При щелчке на кнопке отобразим скрытый элемент, который находится в одном контейнере с ней, а затем удалим эту кнопку.
$(":button").click(function() {
$(this) // Находим элемент
.parent() // Получаем элемент-родитель
.find("span:first") // Находим первый тег <span>
.show() // Отображаем его
.end() // Возвращаемся к элементу-родителю
.find(":button:first") // Находим внутри него первую кнопку
.remove(); // Удаляем кнопку
});
<div>
<input type="button" value="Показать описание"> Термин 1<br>
<span style="display:none">Описание термина 1</span>
</div>
<div>
<input type="button" value="Показать описание"> Термин 2<br>
<span style="display:none">Описание термина 2</span>
</div>
closest(<Селектор>)
— возвращает ближайший родительский элемент, который соответствует селектору.
$("#span1").closest("div").html("Это элемент-родитель");
<div><div><b>
<span id="span1">Текст</span>
</b></div></div>
Результат:
<div><div>Это элемент-родитель</div></div>
parents([<Селектор>])
— возвращает все контейнеры, в которые вложен элемент. Если в качестве необязательного параметра указать селектор, то будут возвращены узлы, которые ему соответствуют. Получим все теги, в которые вложен элемент с идентификаторомspan1
, и выведем их названия.
var elem = $("#div1");
$("#span1").parents().each(function() {
elem.append(this.tagName + " ");
});
<div><u><b>
<span id="span1">Текст</span>
</b></u></div>
<div id="div1"></div>
Результат:
b u div
siblings([<Селектор>])
— находит все узлы, которые расположены до или после элемента на одном уровне вложенности. Если в качестве необязательного параметра указать селектор, то будут возвращены узлы, которые ему соответствуют.
$("div").siblings("a").css("color", "red");
<a href="link1.html">Ссылка 1</a><br>
<span>Текст</span><br>
<div>Текст</div>
<span>Текст</span><br>
<a href="link2.html">Ссылка 2</a><br>
<span><a href="link3.html">Ссылка 3</a></span><br>
<a href="link4.html">Ссылка 4</a><br>
Цвет текста ссылки станет красным, если тег <a>
следует до или после тега <div>
. В этом примере ссылки 1, 2 и 4 станут красного цвета. Ссылка 3 не станет красного цвета, так как расположена внутри тега <span>
.
next([<Селектор>])
— находит узел, который является соседним для элемента и следует сразу после него. Если в качестве необязательного параметра указать селектор, то будут возвращены узлы, которые ему соответствуют. Выделим содержимое тега, который следует сразу за элементом с идентификаторомspan1
.
$("#span1").next().css("color", "red");
<span id="span1">Текст</span>
<b>Текст1</b>
<u><b>Текст2</b></u>
В результате будет выделен фрагмент "Текст1"
.
nextAll([<Селектор>])
— возвращает все узлы, которые следуют после элемента на том же уровне вложенности. Если в качестве необязательного параметра указать селектор, то будут возвращены узлы, которые ему соответствуют. Получим все названия тегов, которые следуют после элемента с идентификаторомspan1
.
var elem = $("#div1");
$("#span1").nextAll().each(function() {
elem.append(this.tagName + " ");
});
<span id="span1">Текст</span>
<b>Текст</b>
<u><b>Текст</b></u>
<div id="div1"></div>
Результат:
b u div
Обратите внимание: мы не получили второй тег <b>
, так как он расположен внутри тега <u>
.
prev([<Селектор>])
— находит узел, который является соседним для элемента и находится сразу перед ним. Если в качестве необязательного параметра указать селектор, то будут возвращены узлы, которые ему соответствуют. Выделим содержимое тега, который находится перед элементом с идентификаторомspan1
.
$("#span1").prev().css("color", "red");
<u><b>Текст2</b></u>
<b>Текст1</b>
<span id="span1">Текст</span>
В результате будет выделен фрагмент "Текст1"
.
prevAll([<Селектор>])
— возвращает все узлы, которые находится перед элементом на том же уровне вложенности. Если в качестве необязательного параметра указать селектор, то будут возвращены узлы, которые ему соответствуют. Получим все названия тегов, которые находится перед элементом с идентификаторомspan1
.
var elem = $("#div1");
$("#span1").prevAll().each(function() {
elem.append(this.tagName + " ");
});
<u><b>Текст2</b></u>
<b>Текст1</b>
<span id="span1">Текст</span>
<div id="div1"></div>
Результат:
b u
Обратите внимание: мы не получили первый тег <b>
, так как он расположен внутри тега <u>
.
contents()
— находит дочерние узлы (включая текстовые) в коллекции элементов или в содержимом документа, если он представляет собой фрейм. Переместим все текстовые узлы в конец элемента с идентификаторомdiv1
.
$("div").contents().not("[nodeType=1]").appendTo("#div1");
<div>Текстовый узел1 <b>узел элемента</b> Текстовый узел2</div>
<div id="div1"></div>
andSelf()
— объединяет предыдущую коллекцию с новой.
$("div").children("a")
// Объединяем коллекцию тегов <div>
// с коллекцией тегов <a>, являющихся
// дочерними элементами тегов <div>
.andSelf()
.css({"border-style": "dotted", margin: "20px"});
<div><br>
<a href="link1.html">Ссылка 1</a><br><br>
<a href="link2.html">Ссылка 2</a><br><br>
<span><a href="link3.html">Ссылка 3</a></span><br><br>
<a href="link4.html">Ссылка 4</a><br><br>
</div>
В этом примере содержимое тега <div>
, а также ссылки 1, 2 и 4 будут обведены пунктирной рамкой. Ссылка 3 не будет обведена, так как расположена внутри тега <span>
.
end()
— позволяет вернуться к предыдущей коллекции. В качестве примера получим коллекцию всех тегов<div>
, внутри которой найдем элемент с идентификаторомspan1
и выведем в нем соответствующий текст. Затем вернемся к предыдущей коллекции всех тегов<div>
, в которой найдем элемент с идентификаторомspan2
и также выведем в нем соответствующий текст.
$("div")
// Находим элемент с id="span1"
.find("#span1").html("Это span1")
// Возвращаемся к предыдущей коллекции
.end()
// Находим элемент с id="span2"
.find("#span2").html("Это span2");
is(<Селектор>)
— проверяет коллекцию или элемент на соответствие селектору. В качестве параметра нельзя указывать сложносоставные селекторы (например, условия+
,~
, и>
). Возвращаетtrue
, если элемент соответствует селектору, иfalse
— в противном случае. Выведем подтверждающее сообщение, если элемент с идентификаторомlink1
расположен внутри тега<div>
, а в противном случае — название тега, в который вложен элемент.
var elem = $("#link1").parent();
if (elem.is("div")) {
alert("Элемент вложен в тег <div>");
}
else {
alert("Элемент вложен в тег " + elem[0].tagName);
}
Самоучитель по jQuery Учебник по jQuery 3.5.1 и AJAX в формате PDF
Помощь сайту
Yandex-деньги: 410011140483022
ПАО Сбербанк:
Счет: 40817810855006152256
Реквизиты банка:
Наименование: СЕВЕРО-ЗАПАДНЫЙ БАНК ПАО СБЕРБАНК
Корреспондентский счет: 30101810500000000653
БИК: 044030653
КПП: 784243001
ОКПО: 09171401
ОКОНХ: 96130
Скриншот реквизитов