Оглавление

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

Привязать поиск элемента к другим элементам HTML-документа можно с помощью следующих методов.
find(<Селектор>) — находит элементы, которые располагаются внутри контейнера. Возвращает новую коллекцию. Найдем все теги <div>, затем внутри них все теги <span> и изменим текст внутри этих тегов.

$("div").find("span").html("Новый текст");
<div>
   <u><span>Текст l</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="Показать описание"> Термин l<br>
<span style="display:none">Описание термина l</span>
</div>
<div>
<input type="button" value="Показать описание"> Термин 2<br>
<span style="display:none">Описание термина 2</span>
</div>

closest{<Селектор>) — возвращает ближайший родительский элемент, который соответствует селектору.

$("#spanl").closest("div").html("Это элемент-родитель");

 

<div><div><b>
<span id="spanl">Текст</span>
</b></div></div>

Результат:


<div><div>
Это элемент-родитель

</div></div>

parents([<Селектор>])— возвращает все контейнеры, в которые вложен элемент. Если в качестве необязательного параметра указать селектор, то будут возвращены узлы, которые ему соответствуют. Получим все теги, в которые вложен элемент с идентификатором spanl, и выведем их названия.

var elem = $("#divl");
$("#spanl").parents().each(function() { 
	elem.append(this.tagName + " ");
});

 

<div><u><b>
<span id="spanl">Текст</span>
</b></u></div>
<div id="divl"></div>


Результат:


b u div

 

siblings([<Селектор>]) — находит все узлы, которые расположены до или после элемента на одном уровне вложенности. Если в качестве необязательного параметра указать селектор, то будут возвращены узлы, которые ему соответствуют.

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

 

<a href="linkl.html">Ссылка l</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>


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

 

Ссылка l
Текст

Текст

Текст
Ссылка 2
Ссылка 3
Ссылка 4

 

 

next([<Селектор>]) — находит узел, который является соседним для элемента и следует сразу после него. Если в качестве необязательного параметра указать селектор, то будут возвращены узлы, которые ему соответствуют. Выделим содержимое тега, который следует сразу за элементом с идентификатором span1.

$("#span1").next().css("color", "red");

 

<span id="span1">Текст</span>
<b>Текст1</b>
<u><b>Текст2</b></u>


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

 

nextAll([<Селектор>]) — возвращает все узлы, которые следуют после элемента на том же уровне вложенности. Если в качестве необязательного параметра указать селектор, то будут возвращены узлы, которые ему соответствуют. Получим все названия тегов, которые следуют после элемента с идентификатором span1.

var elem = $("#divl");
$("#spanl").nextAll().each(function() { 
	elem.append(this.tagName + " ");
});

 

<span  id="spanl">Текст</span> 
<b>Текст</b> 
<u><b>Текст</b></u> 
<div id="divl"></div>


Результат:
b u div
Обратите внимание: мы не получили второй тег <b>, так как он расположен внутри тега <u>.

 

prev([<Селектор>]) — находит узел, который является соседним для элемента и находится сразу перед ним. Если в качестве необязательного параметра указать селектор, то будут возвращены узлы, которые ему соответствуют. Выделим содержимое  тега,   который   находится   перед  элементом   с   идентификатором
span1.

$("#spanl").prev().css("color", "red");

 

<u><b>Текст2</b></u>
<b>Текст1</b>
<span id="spanl">Текст</span>


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

 

Текст2 Текст1 Текст

 

 

prevAll([<Сеяектор>])— возвращает все узлы, которые находятся перед элементом на том же уровне вложенности. Если в качестве необязательного параметра указать селектор, то будут возвращены узлы, которые ему соответствуют. Получим все названия тегов, которые находятся перед элементом с идентификатором span1.

var elem = $("#divl");
$("#spanl").prevAll().each(function() { 
   elem.append(this.tagName + " ");
});

 

<u><b>Текст2</b></u>
<b>Текст1</b>
<span id="spanl">Текст</span>
<div id="divl"></div>


Результат:
b u
Обратите внимание: мы не получили первый тег <b>, так как он расположен внутри тега <u>.

 

contents() — находит дочерние узлы (включая текстовые) в коллекции элементов или в содержимом документа, если он представляет собой фрейм. Переместим все текстовые узлы в конец элемента с идентификатором div1.

$("div").contents().not("[nodeType=l]").appendTo("#div1");

 

<div>
   Текстовый узел1 <b>узел злемента</b> Текстовый узел2
</div>
<div id="div1"></div>

 

 

andSelf() — объединяет предыдущую коллекцию с новой.

$("div").children("a")
// Объединяем коллекцию тегов <div>
// с коллекцией тегов <а>, являющихся
// дочерними элементами тегов <div>
.andSelf()
.css({"border-style": "dotted", margin: "20px"});

 

<div><br>
<a href="linkl.html">Ссылка l</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>, внутри которой найдем элемент с идентификатором spanl и выведем в нем соответствующий текст. Затем вернемся к предыдущей коллекции всех тегов <div>, в которой найдем элемент с идентификатором span2 и также выведем в нем соответствующий текст.


$("div")
//Находим элемент с id="spanl"
.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);
}
B U DIV
Комментарии принадлежат их авторам. Мы не несем ответственности за их содержание.
Отправитель Нити