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

Привязать поиск элемента к другим элементам HTML-документа можно с помощью следующих методов.

$("div").find("span").html("Новый текст");
<div>
<u><span>Текст 1</span></u>
<span>Текст 2</span>
</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>.

$("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>
$("#span1").closest("div").html("Это элемент-родитель");
<div><div><b>
<span id="span1">Текст</span>
</b></div></div>

Результат:

<div><div>Это элемент-родитель</div></div>
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
$("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>.

$("#span1").next().css("color", "red");
<span id="span1">Текст</span>
<b>Текст1</b>
<u><b>Текст2</b></u>

В результате будет выделен фрагмент "Текст1".

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>.

$("#span1").prev().css("color", "red");
<u><b>Текст2</b></u>
<b>Текст1</b>
<span id="span1">Текст</span>

В результате будет выделен фрагмент "Текст1".

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>.

$("div").contents().not("[nodeType=1]").appendTo("#div1");
<div>Текстовый узел1 <b>узел элемента</b> Текстовый узел2</div>
<div id="div1"></div>
$("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>.

$("div")
   // Находим элемент с id="span1"
   .find("#span1").html("Это span1")
   // Возвращаемся к предыдущей коллекции
   .end()
   // Находим элемент с id="span2"
   .find("#span2").html("Это span2");
var elem = $("#link1").parent();
if (elem.is("div")) {
   alert("Элемент вложен в тег <div>");
}
else {
   alert("Элемент вложен в тег " + elem[0].tagName);
}
Предыдущая статья Все статьи Следующая статья